Implementing slider with range binded with the number input

user_9567578 0
Viewed 4392

I am using antd slider component . I am trying to implement a range slider which is also binded with two number inputs like the image attached below

enter image description here

Find my code in the given link https://codesandbox.io/s/icy-framework-xpvl9. On adding range props to the slider component it throws error. I am confused with the logic in implementing min and max in the number inputs binded with the range slider.

        <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}
          />
rc-slider antd reactjs javascript
1 Answers

I revised the way you determine the max/min values for the Input's as well as added the range property provided by ant design for Slider. I also removed this.state.inputValue as it doesn't appear to be needed.

Here is the updated Slider with range.

<Slider
          className="slider-main-div"
          min={0}
          max={100}
          onChange={this.onChange}
          range={true}
          defaultValue={[min, max]}
          value={[min, max]}
        />

The way you are currently doing it was leading to a stack size error because you were reassigning the max/min values to this.state.min and this.state.max for the components themselves. So the antd components were updating their initialized props in the render as you changed the App state, which then updated the antd component's state while they were re-rendering following the App state change, leading to the stack depth error.

I ended up giving them default values between 0-100 and wrote a conditional in the functions to determine when to set state. For example, in the onChangeMin only set the state if the value is less than this.state.max. Otherwise don't set state. This way the input value for min will never exceed the input value for max. 

 onChangeMin = value => {
    if (this.state.max > value) {
      this.setState({ min: value });
    }
  };

Same for onChangeMax but this time comparing value to this.state.min and making sure it is not less than that.

 onChangeMax = value => {
    if (this.state.min < value) {
      this.setState({ max: value });
    }
  };

You can find the fully updated code here.

user_79270360
Related