[解決済み】Firefoxでドラッグ中に入力タイプ=レンジのonchangeイベントが発生しない。

質問

で遊んだら <input type="range"> Firefox はスライダーを新しい位置にドロップした場合のみ onchange イベントをトリガーしますが、Chrome などはスライダーがドラッグされている間 onchange イベントをトリガーします。

Firefoxでドラッグ時に発生させるにはどうしたらいいですか？

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

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

解決方法は？

どうやらChromeとSafariがおかしいようです。 onchange は、ユーザーがマウスを離したときにのみトリガーされるべきです。継続的に更新を行うには oninput このイベントは、Firefox、Safari、Chrome において、マウスとキーボードの両方からのライブアップデートを捕捉します。

しかし oninput はIE10ではサポートされていないので、このように2つのイベントハンドラを組み合わせるのが最善策です。

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

これをチェックする Bugzillaスレッド をご覧ください。