React Js MultiRangeSlider component used to select a multi value from a range of values.
To install this module cd
to your project directory and enter the following command:
npm i react-js-multi-range-sliders
or
yarn add react-js-multi-range-sliders
The following code presents the basic usage scenario of this library:
import MultiRangeSlider from "react-js-multi-range-sliders";
const App = () => {
return (
<MultiRangeSlider
min={0}
max={100}
onChange={({ min, max }) => console.log(`min = ${min}, max = ${max}`)}
/>
);
};
export default App;
Check out the example project for more examples.
Property | Description | Type | Required | Platform |
---|---|---|---|---|
max |
Initial maximum value of the slider. Default value is 1. |
number | yes | |
min |
Initial minimum value of the slider. Default value is 0. |
number | yes | |
onChange |
Callback continuously called while the user is dragging the slider. | function | yes | |
className |
This property used to override the container class Default class is container | string | No | |
title |
This property used to add the slider title | string | No |
- Chrome (latest, mac, windows, iOS, Android)
- Firefox (latest, mac, windows)
- Safari (latest, mac, iOS)
- Edge (latest, windows)
This is how you can spin up the dev environment:
git clone https://github.com/ankushchavaninfo/react-js-multi-range-slider.git
cd react-js-multi-range-slider
react-js-multi-range-slider
is an open source project and will always remain free to use. If you think it's cool, please star it. if you need any help with these or just want to say hi!.
Ankush Chavan 2022, https://ankushchavan.info