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.

function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}

Combining oninput and onchange for Cross-Browser Compatibility

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

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