Boky Boky - 3 months ago 24
React JSX Question

Input range with React JS

I'm trying to create an input range with multiple values with React JS.

I have something like :

class price extends React.Component {
constructor(props){
super(props);

this.state = {
minValue: 0,
maxValue: 20000,
step: 1000,
firstValue: null,
secondValue: null
};

this.handleChange = this.handleChange.bind(this);
}

componentWillMount(){
this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue});
}

handleChange(name, event){
//We set the state value depending on input that is clicked
if(name === "second"){
let newValue = parseInt(this.state.firstValue) + parseInt(this.state.step);
//The second value can't be lower than the first value
if(parseInt(this.state.secondValue) > parseInt(newValue)){
this.setState({secondValue: event.target.value});
}


}else{
//The first value can't be greater than the second value
if(parseInt(this.state.firstValue) < parseInt(this.state.secondValue)){
this.setState({firstValue: event.target.value});
}

}
}

render(){
const language = this.props.language;

return (
<div>
<div className="priceTitle">{language.price}</div>
<div className="rangeValues">Range : {this.state.firstValue} - {this.state.secondValue}</div>


<section className="range-slider">

<input type="range" value={this.state.firstValue} min={this.state.minValue} max={this.state.maxValue} step={this.state.step} onChange={this.handleChange.bind(this, "first")}/>
<input type="range" value={this.state.secondValue} min={this.state.minValue} max={this.state.maxValue} step={this.state.step} onChange={this.handleChange.bind(this, "second")}/>

<div className="minValue">{this.state.minValue}</div>
<div className="maxValue">{this.state.maxValue}</div>
</section>
</div>
);
}
}


I want to disable that second value is lower than the first value and that the first one is greater than the second one. I try to do it in handleChange function but without success.

In my example the second value can't be lower, but if the first one is for example 12000 and the second one is 13000, the state can't be updated any more. I can't change the price any more.

Any advice?

QoP QoP
Answer

You have to compare your state value with the target value.

Your method should look like this

handleChange(name, event){
    let value = event.target.value;
    if(name === "second"){
            if(parseInt(this.state.firstValue) < parseInt(value)){
            this.setState({secondValue:value});
        }
    }
    else{
            if(parseInt(value) < parseInt(this.state.secondValue)){
            this.setState({firstValue: value});
        }
    }
}

If you want to allow them to be equal, just use <= instead of <.

jsfiddle

Comments