react-js-multi-range-sliders

react-js-multi-range-sliders

React Js MultiRangeSlider component used to select a multi value from a range of values.

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