multi-range-slider-react
v2.0.7
Published
Simple component to select range values from slider. React component that return two value minValue and maxValue by event onInput/onChange.
Downloads
27,432
Maintainers
developergovindguptaReadme
multi-range-slider-react
a react component that can easy to use and interact with parent component with props and events.
Click on image to view demo-code.
No Dependency only single component file and css file
MultiRangeSlider.jsx , MultiRangeSlider.css
You can customize css to change UI/UX.
Download CSS file and modify it and reference it with baseClassName attribute
view Demo
GitHub-page
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
How to use
Example Code
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;