CODEWITHSUNDEEP
htmlreactjsevent-handlingmouseuponmouseup
Joshua Segal
Joshua Segal

Reputation: 573

adding mouseup event for range in react

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.

Upvotes: 2

Views: 5509

Answers (1)

blackwright
blackwright

Reputation: 99

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.

Upvotes: 3

Related Questions