A fully customizable multi-range slider component by Om Prashant Londhe.
npm install two-thumb-range-slider
npm i two-thumb-range-slider
`
How to use?
Usage in React powered application š:
`typescript
export const MultiRangeSliderBasicUsage = () => {
const [value, setValue] = useState([1, 100]);
return
}
`
Just do this and you are ready to rock! š„³
Required props
`typescript
min: number
max: number
value: number[]
onChange: Dispatch>
`
Customisations
1. height?: number;: Defines the height of the slider container
2. sliderInactiveBackgroundColor?: string;: Background colour of inactive portion of the slider.
3. sliderActiveBackgroundColor?: string;: Background colour of the active portion of the slider.
4. sliderHeight?: number;: Defines the height of the slider.
5. sliderInactiveRadius?: number;: Radius for the inactive portion of the slider.
6. sliderActiveRadius?: number;: Radius for the active portion of the slider.
7. thumbColor?: string;: Thumb colour of the slider.
8. thumbRadius?: number;: Thumb radius for the slider.
9. thumbBorder?: string;: Border of thumb of the slider.
10. thumbHeight?: number;: Manages the height of the slider thumb.
11. thumbWidth?: number;`: Manages the width of the slider thumb.