audiolux-multi-range-slider

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

[e-mail]

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.