onchange event on input type=range is not triggering in firefox while dragging

javascript html firefox input onchange
Prasanth K C picture Prasanth K C · Aug 31, 2013 · Viewed 296.3k times · Source

When I played with <input type="range">, Firefox triggers an onchange event only if we drop the slider to a new position where Chrome and others triggers onchange events while the slider is dragged.

How can I make it happen on dragging in Firefox?

Answer

Frederik picture Frederik · Sep 28, 2013

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.

Related questions

How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)

Read More
ReferenceError: event is not defined error in Firefox

I've made a page for a client and I initially was working in Chrome and forgot to check if it was working in Firefox. Now, I have a big problem because the whole page is based upon a script that …

Read More
"The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

I have a javascript application and when I run it on firefox I am getting the following erro on the console: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css". DumbStuck!! EDIT: Note that …

Read More