Installation

To install this module cd to your project directory and enter the following command:

npm i react-js-multi-range-sliders --save

or

yarn add react-js-multi-range-sliders

Usage

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.

Properties

| 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 | | | |

Browser support

• Chrome (latest, mac, windows, iOS, Android)
• Firefox (latest, mac, windows)
• Safari (latest, mac, iOS)
• Edge (latest, windows)

Contributing

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

Made with ❤️ 🙏

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!.

Author

Ankush Chavan 2022, https://ankushchavan.com

License

ISC