Get material ui slider value in onDragStop event (react)
In a newer version of Material UI you could use:
<Slider
onChange={} // for example updating a state value
onChangeCommitted={} // for example fetching new data
/>
Also ran into this problem! If you use a component inside a class, use both callbacks:
<Slider onChange={ (e, val) => this.val = val }
onDragStop={ (e) => this.props.update(e, control.id, this.val)
/>
If you want the Slider
value to be part of the component state, e.g. for triggering a re-render of the Slider
when it changes (this requires you to pass this.state.value
to the Slider
as well), you can do this:
class Parent extends Component {
render() {
return <Slider value={this.state.value} onChange={this.handleChange} onDragStop={this.handleDragStop}/>
}
handleChange = (event, value) => this.setState({ value });
handleDragStop = () => this.props.update(this.state.value);
}
Otherwise you can just assign the value to this
:
class Parent extends Component {
render() {
return <Slider onChange={this.handleChange} onDragStop={this.handleDragStop}/>
}
handleChange = (event, value) => this.value = value;
handleDragStop = () => this.props.update(this.value);
}