2

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.

Joshua Segal
  • 541
  • 1
  • 7
  • 19

1 Answers1

3

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.

blackwright
  • 89
  • 2