how to create double range price slider using react bootstrap

Question

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:

Double range slider

Sorcerer

Answer 1

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:

• https://react-bootstrap.github.io/forms/range/#form-range-props
• https://getbootstrap.com/docs/5.1/forms/range/#overview
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

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:

• HTML5: Slider with two inputs possible?
• Ho can I add two values in Bootstrap range slider
• how to implement a price range slider

Issy

so how to manage this with double range slider? give me some suggestion ! – Sorcerer

how is this component even called a "Range" when it's only a single value?! – Malefic