如何使用 React bootstrap 创建双范围价格滑块

Question

如何使用 React 创建双范围滑块 bootstrap

我试过 npm install react-bootstrap-range-slider

<RangeSlider
      value={value}
      onChange={changeEvent => setValue(changeEvent.target.value)}
    />

但它只显示一个范围，我想要两个范围如下图所示：

Answer 1

react-bootstrap 遵循 bootstrap 的规范。 Bootstrap class "form-range" 仅适用于"range"类型的一种输入，进而只支持一种值：

所以答案是：built-in methods/properties.

不可能

编辑:

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

您问过如何“使用 React bootstrap”，这正是答案。

你试过google了吗？与往常一样，在大型程序员世界中，您有两种可能性：

对于第一点，我只是 googled 并发现 https://zillow.github.io/react-slider/，它能够处理两个值（他们称为缩略图）。在造型上也是不拘一格，大家可以调整bootstrapstylings/classes。然后它将看起来像一个真正的 bootstrap 组件。

对于第二点：有很多简约的解决方案。因此，只需寻找您最喜欢的那个，不要重新发明轮子。例如，您可以使用两个滑块，它们看起来像一个：

how to create double range price slider using react bootstrap