A lightweight customizable React multi-range slider built using Vite and styled components.
This slider is designed to empower you in scenarios such as repartitions, percentage distribution, and more.
Dynamic Thumb Configuration: Easily set the number of thumbs according to your requirements, offering flexibility in user interaction and data representation.
Style Customization: Tailor the appearance of the slider and thumbs effortlessly. Feel free to adapt the provided styled components to your preferred styling methods, whether it's pure CSS or alternative styling approaches.
Precision Control: Define the step size, minimum, and maximum values for precise control over the slider's behavior, ensuring seamless integration with your application's specific needs.
Here are the props that control and customize the component:
props | type | required | default | description |
---|---|---|---|---|
values | number[] | true | Values of the slider. The length of the array will define the number of thumbs | |
labels | string[] | false | [] | Labels of the values. The indexes of the labels array match the values array indexes |
unit | string | false | '' | Unit of the values displayed next to each of them |
min | number | false | 0 | Minimum value that the user can set for each value of the values array |
max | number | false | 100 | Maximum value that the user can set for each value of the values array |
step | number | false | 1 | Value change when the user interacts with the slider |
onChange | (newValues: number[]) => void | true | Function that updates the values when the user interacts with the slider | |
ref | React.MutableRefObject | false | React ref added to the main container | |
color | string | false | '#142a4c80' | Main color of the slider bar |
secondaryColor | string | false | If given, one of two values will be of this color alternatively | |
barHeight | number | false | 12 | Bar height in px |
thumbWidth | number | false | 30 | Thumb width in px |
thumbHeight | number | false | 30 | Thumb height in px |
thumbColor | string | false | 'black' | Thumb color |
thumbStyle | React.CSSProperties | false | Override default style with inline style on the thumb | |
containerStyle | React.CSSProperties | false | Override default style with inline style on the main container |
import React, { useState } from "react"
import MultiRangeSlider from "react-multi-range-slider"
const MySlider = () => {
const [values, setValues] = useState([40, 45, 15])
const labels = ['Men', 'Women', 'Other']
return (
<MultiRangeSlider
values={values}
labels={labels}
onChange={setValues}
color='#142a4c80'
secondaryColor='#142a4c40'
min={0}
max={100}
step={5}
unit='%'
/>
)
}
export default MySlider
MIT License (Free to use)
Camille Durthaller-Renard
Contact: camilledr10@gmail.com