How to Trigger Onchange Event for Input Type Range on Drag in Firefox?

Onchange Event Not Triggered on Drag in Firefox for Input Type Range

The onchange event for an element typically fires when the user changes its value. However, in Firefox, this event is only triggered when the slider is released after being dragged. This differs from browsers like Chrome, where the event is fired during the drag operation.

Solution: Using oninput Event

To resolve this discrepancy and enable continuous value updates during drag in Firefox, it is recommended to use the oninput event instead of onchange. The oninput event captures live updates from both mouse and keyboard input, ensuring continuous value updates in all major browsers, including Firefox, Safari, and Chrome.

Combining oninput and onchange

For support in older browsers like IE10, which do not support oninput, you can combine both event handlers. This ensures that both continuous value updates during drag and the final value update on release are handled:

<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>

Additional Information

For further details on the behavior of the onchange event in browsers, refer to the following Bugzilla thread: https://bugzilla.mozilla.org/show_bug.cgi?id=1145662.

The above is the detailed content of How to Trigger Onchange Event for Input Type Range on Drag in Firefox?. For more information, please follow other related articles on the PHP Chinese website!