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
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}
/>
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.