Как реализовать слайдер с диапазоном, связанным с вводом числа

Question

Я использую компонент слайдера antd. Я пытаюсь реализовать ползунок диапазона, который также связан с двумя числовыми входами, такими как изображение ниже

Найти мой код по данной ссылке https://codesandbox.io/s/icy-framework-xpvl9. При добавлении реквизита диапазона к компоненту ползунка он выдает ошибку. Меня смущает логика c в реализации min и max в числовых входах, связанных с ползунком диапазона.

<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

Вы должны использовать отдельные переменные для хранения вашего минимального и максимального значения. В настоящее время ваше значение ползунка, минимальное значение ввода и максимальное значение ввода указывают на переменную 'value'. Это будет sh в вашем коде. Примерно так: https://codesandbox.io/s/kind-mcclintock-blm4e