range out of scope

[marcoslaredo]

Hi, I'm using the "react-input-range": version "^1.3.0", and have an issue when I make a click at the corners of the range, it gives values out of the scope, for the lower side, gives negatives values, for the higher side gives values greater then the maximum. Here is my debugger, in the corner right you can see my component, then the handle function and the console log

Here is my render function with the call for the InputRange.

Thank you...

[stefanb2]

I can confirm this issue. I'm using react-input-range version 1.3.0.

To avoid the React warning I have updated my onChange callback to ignore invalid values:

constructor(props) {
    ...
    this.changed = value => {
        ...
        const range = this.props.XXX;
        if ((value.min < range.min) ||
            (value.max > range.max))
            return;
        ...
        this.setState({
            value: value,
        });
    };
    ...
}
...
render() {
    ....
    return (
        ...
        <InputRange
            ...
            minValue={range.min}
            maxValue={range.max}
            onChange={this.changed}
            ...
        />
       ...
    );
}

[jenglamlow]

Hi,

The same thing happen to draggable track as well, When I drag the track to the boundary, the value can exceed the max/min value.

This is the code:

import React, { Component } from 'react';
import InputRange from 'react-input-range';
import 'react-input-range/lib/css/index.css';

class Test extends React.Component {
  constructor(props) {
    super(props);
    
   this.state = {
      value: {
        min: 10,
        max: 50,
      },
    }
  }
  
  render() {
    return (
      <div>
       <InputRange
         draggableTrack
         maxValue={100}
         minValue={0}
         onChange={value => this.setState({ value: value })}
         value={this.state.value} />
     </div>)
  }
}

[louisotto]

I've just had the same issue, it seems to be when you click on the upper label it can cause an out of bounds value to be entered.

The easiest fix I can suggest is in CSS do the following:

.input-range__label input-range__label--value,
.input-range__label-container {
  pointer-events: none;
}

That will stop the unexpected behaviour, but the slider will still work.

It's a bit hacky, but it worked for me.