Search code examples
react-bootstraprangeslider

how to create double range price slider using react bootstrap

How to create double range slider using react bootstrap

double range

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:

Double range slider

Solution

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

    1. Find and use third party solution
    2. Write your own

    For the first point I just googled and found https://zillow.github.io/react-slider/, 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: