Input range with React JS

Question

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 · Accepted Answer · 2018-02-24 09:43:25Z

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 <.

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){ 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}); } } } render(){ const language = this.props.language; return ( <div> <div className="priceTitle">15</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> ); } } ReactDOM.render( <Price language="World" />, document.getElementById('container') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> </div>

jsfiddle

Collectives™ on Stack Overflow

Input range with React JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related