audiolux-multi-range-slider

A customizable react component for controlling the hue range for the AudioLux project. Forked from multi-range-slider-react by Govind Prasad Gupta.

A list of properties to control the component

|prop | type | default | description | | ------------ | ------------ | ------------ | ------------ | | id | String | '' | Sets id for multi-range-slider control root div | | min | Number | 0 | Slider range minimum value | | max | Number | 100 | Slider range maximum value | | minValue | Number | 25 | Slider range selected minimum thumb value | | maxValue | Number | 75 | Slider range selected maximum thumb value | | step | Number | 5 | Slider change value when slider bar clicked or keyboard arrow key pressed | | stepOnly | Boolean | false | Specify user to select only values in step range only | | canMinMaxValueSame | Boolean | false | Specify if minValue and maxValue can be the same | | preventWheel | Boolean | false | Specify if mouse wheel can change slider values. If false then (shift+mwheel) change minValue (ctrl+mwheel) change maxValue, (ctrl+shift+wheel) change both values | | disabled | Boolean | false | Specify if user can change slider values with mouse/keyboard. If false, can only change by updating props/state values | | ruler | Boolean | true | Specify if ruler is visible or not | | label | Boolean | true | Specify if ruler labels are visible or not | | labels | String Array | | Specify ruler step label values | | minCaption | String | | Caption on min thumb when sliding - can set on onChange/onInput event | | maxCaption | String | | Caption on max thumb when sliding - can set on onChange/onInput event | | subSteps | Boolean | false | Specify if small step lines are visible or not | | baseClassName | String | multi-range-slider | Component class name to change CSS style | | className | String | '' | Add additional class with baseClassName to div.multi-range-slider | | style | React.CSSProperties | | Specify/override additional style on div.multi-range-slider | | barLeftColor | String-Color | | Specify slider left part background color | | barRightColor | String-Color | | Specify slider right part background color | | barInnerColor | String-Color | | Specify slider inner part background color | | thumbLeftColor | String-Color | | Specify slider left thumb background color | | thumbRightColor | String-Color | | Specify slider right thumb background color | | ref|React.useRef | | Reference to div.multi-range-slider |

Event List

| Event | Description | | - | - | | onChange | Trigger when thumb mouse up OR slider value change done | | onInput | trigger on thumb mouse move OR slider value changing |

typescript props definition

Props = {
	min?: number | string;
	max?: number | string;
	step?: number | string;
	minValue?: number | string;
	maxValue?: number | string;
	baseClassName?: string;
	className?: string;
	style?: React.CSSProperties;
	ruler?: boolean | string;
	label?: boolean | string;
	subSteps?: boolean | string;
	stepOnly?: boolean | string;
	preventWheel?: boolean | string;
	labels?: string[];
	minCaption?: string;
	maxCaption?: string;
	barLeftColor?: string;
	barRightColor?: string;
	barInnerColor?: string;
	thumbLeftColor?: string;
	thumbRightColor?: string;
	onInput?: (e: ChangeResult) => void;
	onChange?: (e: ChangeResult) => void;
};

onInput/onChange event parameter type - typescript

type ChangeResult = {
	min: number;
	max: number;
	minValue: number;
	maxValue: number;
};

To Install

Copy the following line and run on CLI

npm install audiolux-multi-range-slider

AudioLux Demo

Demo

License

ISC

Attribution

This component is a fork of multi-range-slider-react by:

Govind Prasad Gupta

developergovindgupta

[email protected]

Published and customized under the ISC License.

Copyright

Copyright 2025 Govind Prasad Gupta

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.