How to create double range slider using react bootstrap
I tried with npm install react-bootstrap-range-slider
<RangeSlider
value={value}
onChange={changeEvent => setValue(changeEvent.target.value)}
/>
But it shows only one range i want two range look like this image:
1 Answer
react-bootstrap follows the specification of bootstrap. Bootstrap class "form-range" is only appliable to one input of type "range", which in turn only supports one value:
So the answer is: it's not possible with built-in methods/properties.
Edit:
so how to manage this with double range slider? give me some suggestion !
You asked how to do it "using react bootstrap" and this is exactly the answer to it.
Have you tried to google it? As always in the big programmer world, you have two possibilities:
- Find and use third party solution
- Write your own
For the first point I just googled and found , which is capable of working with two values (they called thumbs). It is also unopinionated in terms of styling, so you can adjust bootstrap stylings/classes. Then it will look like a true bootstrap component.
For the second point: There are many minimalistic solutions. So just look for the one you like most and don't reinvent the wheel. For example you can take two sliders, that will look like one:
