Search code examples
reactjsslidermaterial-ui

Get Material UI Slider value in onDragStop event


I want to fire an event onDragStop rather than onChange using a Material UI Slider in my React app (so that the event fires fewer times). However, the documentation indicates that the onDragStop function signature only has the mouseevent: function(event: object) => void. So, the following works with onChange:

<Slider onChange={ (e, val) => this.props.update(e, control.id, val) }  />

However, this event doesn't have a second parameter val:

<Slider onDragStop={ (e, val) => this.props.update(e, control.id, val) }  />

How can I get the current value of the Slider in the onDragStop function? Note, I'm unable to use this, as it refers to the parent component.


Solution

  • 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)
    />