Warning: Failed prop type: "value" must be in between "minValue" and "maxValue"

[cdolek]

Using draggableTrack on a range, the values for min and max are 0 and 100. Min/max values can exceed the boundaries while dragging.

So, encountered the following error:

VM33798:34 Warning: Failed prop type: "value" must be in between "minValue" and "maxValue"
in InputRange (created by Posts)
in Posts (created by Route)
in Route (created by Authenticated)
in Authenticated (created by App)
in Switch (created by App)
in div (created by Grid)
in Grid (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent

---

Code:

I am rendering 5 elements, dynamically. For some reason, the handles obey the min/max limit but the drag operation does not.

... in the loop ...
<InputRange
draggableTrack
maxValue={100}
minValue={0}
onChange={value => this.onRangeChange(prediction.name, value)}
onChangeComplete={value => console.log(value)}
value={this.state[prediction.name]}
/>

[cdolek]

I could not reproduce the problem, it works normally when I try it on CodePen.

Edit 8/16/2018: Reopened the issue - it was reported for v1.3.0

[jenglamlow]

Hi,

I can reproduce this issue, using simple React app. But I can't reproduce using the CodePen produced by @cdolek. I guessing it is using the different version

I'm using version v1.3.0. 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>)
  }
}

[TomPradat]

I do have this issue without using draggableTrack. I'm using version v1.3.0. It happens when i click at the end without dragging.

[huangzhuolin]

I have the same problem. react-input-range version: 1.3.0 react version: 16.4.1

[huangzhuolin]

@cdolek I tried version 1.2.2 and the issue didn't occur. This issue maybe introduced in version 1.3.0. Please reopen this issue.

[raivisdejus]

To reproduce the issue set min and max values equal to the minValue and maxValue Version 1.3.0

this.state = {
      value: {
        min: 0,
        max: 100,
      },
    }

render() {
    return (
      <div>
       <InputRange
         draggableTrack
         maxValue={100}
         minValue={0}
         onChange={value => this.setState({ value: value })}
         value={this.state.value} />
     </div>)
  }

[JSEvgeny]

I'm having the same issue. When state's min and max values equal to minValue maxValue sometimes it is even possible to get -1 and 101 as a chosen values which is clearly out of range. Please reopen the issue

[TomPradat]

For a quick fix you can check for it onChange :

  onChange = (min: number, max: number) => (values: {
    min: number,
    max: number,
  }) => {
    const processedValues = { ...values };

    if (processedValues.max > max) {
      processedValues.max = max;
    }

    if (processedValues.min < min) {
      processedValues.min = min;
    }

    this.setState({ values: processedValues });
  };

[cdolek]

I'm having the same issue. When state's min and max values equal to minValue maxValue sometimes it is even possible to get -1 and 101 as a chosen values which is clearly out of range. Please reopen the issue

the issue has already been reopened on Aug 16

[hugofrid]

I had the same issue and by adding a condition onChangeStart I could prevent it to happen:

onChangeStart={v =>{ if(v.max > 301) { setValue(min:0,max:301) } else { setValue(v); } onChange={v => setValue(v)}

[ghost]

It may be that you are changing your state just in the return statement <InputRange onChange={value => this.setState({ batteryRange: value })} /> In this case you need to change your value's state with async/await attributes to update state after state's value assigned

.
.
handleBatteryChange = async (value) => {
  await this.setState({ batteryRange: value })
}

<InputRange
    maxValue={100}
    minValue={0}
    onChange={value => this.handleBatteryChange(value)}
    onChangeComplete={value => this.handleFilterChange(value, 'battery')}
    value={this.state.batteryRange} />

[ClemThu]

Hi, i have the same problem, i try with async and the error is not fix

const handleRangeValue = async (rangeValue: any) => { const startDate: any = fromUnixTime(rangeValue.min); const endDate: any = fromUnixTime(rangeValue.max); const startDate2: any = rangeValue.min; const endDate2: any = rangeValue.max;

await setRangeValue(rangeValue);
await setSelectedEndDate(endDate);
await setSelectedStartDate(startDate);
await setForm({ ...form, startDate: startDate2, endDate: endDate2 });

};

Have you an idea to fix it pliz ?

[vchaudhari]

Hi, I have one issue i am not able to set minValue and maxValue dynamically can any budy tell me the how can I set it? var maxvalue= 100; var minvalue= 0; <InputRange maxValue={maxvalue} minValue={minvalue} />

[prashantseekav]

any update on this?

[michaelCaleyWhaley]

This issue is still occurring