Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<input type="range" onChange /> fire too often #2454

Closed
MoOx opened this issue Nov 3, 2014 · 3 comments
Closed

<input type="range" onChange /> fire too often #2454

MoOx opened this issue Nov 3, 2014 · 3 comments

Comments

@MoOx
Copy link

MoOx commented Nov 3, 2014

Like it's the case for input text, onChange should be triggered when user have finished interaction, don't you think ?
Right now, whenever I touch the range, I'm getting multiple change event (like window resize, it's crazy).
I think to be coherent with onChange behavior on input text, range onChange should be fired when user release the slider.

@MoOx
Copy link
Author

MoOx commented Nov 3, 2014

Sorry I said some shit. onChange it's like onKeypress (up/down whatever), so make sense to let onChange on range the way they are.
So it's up to me to debounce.

That being said, maybe you can offer a new thing for the original debounced onChange ?

@sophiebits
Copy link
Collaborator

Our plan here is to make onChange consistently fire on every change in all browsers; see #554. You can use onBlur or maybe onMouseUp if that's the behavior you're looking for, but the native onChange event varies widely across browsers even if we don't do anything special in React so that's probably not what you want.

@aldendaniels
Copy link

A quick test in recent versions of FF, Chrome, and Safari shows that Chrome, FireFox and Safari now have matching behavior: onInput fires while dragging the slider, onChange fires on release. I suspect it'd now make sense for React to also match this behavior.

Code pen: https://codepen.io/alden/pen/MWjMmyZ?editors=1111.

GIF:
Screen Recording 2021-01-24 at 10 25 23 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants