Why is the onchange Event Not Triggered for Range Input Drag in Firefox?

Firefox onchange Event Not Triggered on Range Input Drag

In input elements with type "range," when the slider is dragged, the onchange event is only triggered when the slider is dropped to a new position in Firefox. In contrast, Chrome and other browsers trigger onchange events during the drag.

Solution: Use oninput Event

Firefox correctly triggers the onchange event only upon release, as per the specification. To capture live updates during dragging in all browsers, use the oninput event instead.

<code class="html">function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}</code>

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

Combining oninput and onchange for Cross-Browser Compatibility

For cross-browser compatibility, consider combining both oninput and onchange event handlers:

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

This ensures that onchange events are still triggered in Firefox upon release, while oninput events provide continuous updates in all browsers.

The above is the detailed content of Why is the onchange Event Not Triggered for Range Input Drag in Firefox?. For more information, please follow other related articles on the PHP Chinese website!