multi-range-slider-react

a react component that can easy to use and interact with parent component with props and events.

Following is the list of props that control the component

|props | type | default | description | | ------------ | ------------ | ------------ | ------------ | | id | String | '' | Set id to multi-range-slider control root div | | min | Number | 0 | Slider Minimum Value that user can set | | max | Number | 100 | Slider Maximum Value that user can Set | | minValue | Number | 25 | Slider range selected minimum value that will show default selected | | maxValue | Number | 75 | Slider range selected maximum value that will show default selected | | step | Number | 5 | Slider change value that will change when bar clicked or keyboard arrow key pressed | | stepOnly | Boolean | false | specify user to select only values in round of step only | | canMinMaxValueSame | Boolean | false | If true then user can select both min and max same value otherwise have difference of step value | | preventWheel | Boolean | false | true then it not accept mouse wheel to change its value. false then (shift + wheel) change minValue (ctrl+wheel) change maxValue, (ctrl+shift+wheel) change both values | | disabled | Boolean | false | true then user can not change its value by mouse/keyboard. Only can change by update props/state value | |ruler|Boolean|true|is ruler visible or not| |label|Boolean|true|is label visible or not| |labels|String Array||specify steps label string value| |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|is small steps line visible or not| |baseClassName|String|multi-range-slider|Change CSS style of your own| |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;
};

How to Install

copy following code and run on CLI

npm install multi-range-slider-react

App.jsx

import React, { useState } from "react";
import MultiRangeSlider from "multi-range-slider-react";
function App() {
const [minValue, set_minValue] = useState(25);
const [maxValue, set_maxValue] = useState(75);
const handleInput = (e) => {
	set_minValue(e.minValue);
	set_maxValue(e.maxValue);
};

return (
	<div className="App">
		<MultiRangeSlider
			min={0}
			max={100}
			step={5}
			minValue={minValue}
			maxValue={maxValue}
			onInput={(e) => {
				handleInput(e);
			}}
		/>
	</div>
	);
}

export default App;

App.tsx

import React, { useState } from "react";
import MultiRangeSlider, { ChangeResult } from "multi-range-slider-react";

const App = () => {
	const [minValue, setMinValue] = useState(25);
	const [maxValue, setMaxValue] = useState(75);

	return (
		<div className='App'>
			<div className='multi-range-slider-container'>
				<b>Simple range slider with default values</b>
				<hr />
				<MultiRangeSlider
					min={0}
					max={100}
					step={5}
					minValue={minValue}
					maxValue={maxValue}
					onInput={(e: ChangeResult) => {
						setMinValue(e.minValue);
						setMaxValue(e.maxValue);
					}}
				></MultiRangeSlider>
				<div style={{ display: 'flex', justifyContent: 'center' }}>
					<div style={{ margin: '10px' }}>onInput:</div>
					<div style={{ margin: '10px' }}>{minValue}</div>
					<div style={{ margin: '10px' }}>{maxValue}</div>
				</div>
			</div>
		</div>
	)

}
export default App;

License

(Free to use)