Get material ui slider value in onDragStop event (react)

reactjs slider material-ui
mike picture mike · Nov 22, 2017 · Viewed 9.2k times · Source

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.

Answer

Masterstvo_ picture Masterstvo_ · Dec 1, 2017

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

Related questions

JSX React HTML5 Input Slider Doesn't Work

I'm using React.JS for a build, and am building a range input slider with two choices for a component. this is my code: <input id="typeinp" type="range" min="0" max="5" value="3" step="1"/> When I place it into …

Read More
Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More