adding mouseup event for range in react

Question

I'm trying to make an onmouseup like event on my slider (input html tag with type=range) in my react render function. I would love to do

<input id="slider" type="range" min="1" max="100" value={this.state.input_val} onChange={this.handleChange} onmouseup={this.handleSubmit} />

But you can't add the onmouseup event. The second thing I tried was adding an addEventListener which also failed probably due to all of react's binding rules.

this.slider.addEventListener('mouseup', e => { this.handleSubmit() });

I want an event to go off when the slider is released in my app, all help is very appreciated.

blackwright · Accepted Answer · 2019-06-22 23:22:35Z

React uses "synthetic events," a wrapper around the browser's native events, to smooth out browser compatibility. You are already using one for onChange. The corresponding synthetic event to onmouseup is onMouseUp (different capitalization):

<input id="slider" type="range" min="1" max="100" value={this.state.input_val} onChange={this.handleChange} onMouseUp={this.handleSubmit} />

There's a corresponding synthetic event for every native event. Check out https://reactjs.org/docs/events.html#mouse-events for a list of all the mouse events.

Collectives™ on Stack Overflow

adding mouseup event for range in react

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related