入力タイプ範囲の Firefox でのドラッグ時に Onchange イベントがトリガーされない

要素の onchange イベント通常、ユーザーが値を変更したときに起動されます。ただし、Firefox では、このイベントはスライダーがドラッグされた後に放された場合にのみトリガーされます。これは、ドラッグ操作中にイベントが発生する Chrome などのブラウザとは異なります。

解決策: oninput イベントを使用する

この不一致を解決し、ドラッグ操作中に継続的な値の更新を有効にするには、 Firefox でドラッグする場合は、onchange の代わりに oninput イベントを使用することをお勧めします。 oninput イベントは、マウスとキーボードの両方の入力からライブ更新をキャプチャし、Firefox、Safari、Chrome を含むすべての主要なブラウザで継続的な値の更新を保証します。

oninput と onchange の組み合わせ

oninput をサポートしていない IE10 などの古いブラウザーをサポートするには、両方のイベント ハンドラーを組み合わせることができます。これにより、ドラッグ中の継続的な値の更新とリリース時の最終的な値の更新の両方が確実に処理されます:

追加情報

ブラウザでの onchange イベントの動作の詳細については、次の Bugzilla スレッドを参照してください: https://bugzilla.mozilla。 org/show_bug.cgi?id=1145662.