react-input-range icon indicating copy to clipboard operation
react-input-range copied to clipboard

Programmatically set range slider values

Open IfyNdu opened this issue 7 years ago • 1 comments

Is there a way I can programatically set values?. Basically i would like to implement a reset button that sets range sliders back to its default values. Once these values are set, the UI should respond accordingly.

Any assistance would be highly appreciated.

IfyNdu avatar Mar 20 '18 15:03 IfyNdu

I achieved this easily by having the value prop set to a value (a min/max range) and the minValue and maxValue props set to another value, like this:

<InputRange maxValue={this.props.form.widthSlider.max} minValue={this.props.form.widthSlider.min} step={10} value={this.props.form.width} onChange={this.handleWidthChange} />

Simply resetting form.width to its initial value, that is {min: widthSlider.min, max: widthSlider.max} resets the slider to the initial values. They are all connected to a Redux store, but that's not necessary

igghera avatar Mar 28 '18 11:03 igghera