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;