Input range is taking in negative even after a positive value is being assigned as minValue

[hemant63821]

Even after setting min value for the react input range the slider is accepting negative value, below is the code and the attachment necessary for the issue.

this.state = { value: { min: 8000, max: 75000 } }

<InputRange formatLabel={value => ${this.convertToIndianFormat(value)}kms} maxValue={100000} minValue={0} ref="input_range" value={this.state.value} onChange={value => this.setState({ value })} onChangeComplete={value => this.bindDistanceRange(value.min, value.max, this.cityName, this.sortObject, this.searchText)} />

[jasonejavier]

Hi. I'm facing also the same issue. It happens when I double-click slider.

[vivrathore]

This issue is caused when we click on the minimum range near starting. It is something random either on a single or double click. It might be an issue with the core code.

For now, the patch we can apply is via onChange function.

Make it

onChange={value => {
              console.log(value.min ); // This is just to show you when you get the minus value on click
              value.min = value.min <= 0 ? 10 : value.min;
              this.setState({ value })}
            } 

I am assuming your minimum value is 10 here because it is mine. Just replace 10 with your minimum value. This is not pure function but you get the logic here.

[robba86]

          value.min = value.min <= 0 ? 10 : value.min;

When i added this, or it was like this before (idk). The max value acts the same way, to fix: value.max = value.max >= 100 ? 100 : value.max;