javascript - 如何实现与数字输入绑定(bind)范围的 slider

Question

我正在使用antd slider 组件。我正在尝试实现一个范围 slider ，它也与两个数字输入绑定(bind)，如下面所附的图像

在给定链接 https://codesandbox.io/s/icy-framework-xpvl9 中查找我的代码。在向 slider 组件添加范围 Prop 时，它会引发错误。我对与范围 slider 绑定(bind)的数字输入中实现最小值和最大值的逻辑感到困惑。

<Slider
          className="slider-main-div"
          min={min}
          max={max - 1}
          onChange={this.onChange}
          value={typeof inputValue === "number" ? inputValue : 0}
        />
        <div className="range-input-number-main">
          <InputNumber
            className="min-input-main"
            min={min + 1}
            max={max - 1}
            value={inputValue}
            onChange={this.onChangeMin}
          />
          <span className="range-span">to</span>
          <InputNumber
            className="min-input-main"
            min={21}
            max={50}
            value={inputValue}
            onChange={this.onChangeMax}
          />
    ```

Answer 1

您应该使用单独的变量来存储最小值和最大值。目前您的 slider 值、输入最小值和输入最大值都指向变量“value”。这将在您的代码中发生冲突。 像这样的:https://codesandbox.io/s/kind-mcclintock-blm4e