CODEWITHSUNDEEP
javascriptjquery
Boa
Boa

Reputation: 2677

Which event type should I use with inputs of type 'range'?

I have a form with several inputs of type 'range', and which has a submit button that's hidden until each range input fires an event. I'm curious as to which type of event to select for this purpose.

If using 'click' events, some older browsers (i.e. Windows' Safari) won't always register the events. It's probably not a good idea to use 'mouseup', since on legacy browsers, or on some mobile browsers, the range inputs will instead be generated as regular input boxes. Doing something like the following, simply does not trigger an event on the Opera browser running on Android (on which the range inputs are rendered as regular text input boxes):

$('#my_form input').on("mouseup change", function(){ ... }

So my question is, which event type should I choose that would work well on legacy, mobile, and modern browsers, and would avoid the problems listed above?

Upvotes: 1

Views: 150

Answers (2)

zukeru
zukeru

Reputation: 1

You can use the change event:

$('#my_form input').on("change", function(){ ... }

or:

$('#my_form input').change(function(){ ... }

This will work even if the browser renders the range input as a regular text input.

Upvotes: 0

KaMZaTa
KaMZaTa

Reputation: 741

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:

<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" 
   oninput="showVal(this.value)" onchange="showVal(this.value)">

Check out this Bugzilla thread for more information.

Upvotes: 1

Related Questions