ホーム > カテゴリ > HTML5・JavaScript >

スライダーの変更イベントの対処方法[input type="range"]

HTML5で導入されたスライダーの値の変更検知イベントは、ブラウザによって動作が異なります。特にスライダーの値が変更した事によって重い処理を行う場合などに「リアルタイム」で何度も変更イベントが発生すると困ります。

今回はスライダーの変更イベントの発生を1回だけにする方法をご紹介します。

各ブラウザのスライダーイベント

onchangeイベント、oninputイベントが発動する条件をまとめました。

ブラウザonchangeoninput
IE11リアルタイムに発動動作しない
Edge変更後に発動リアルタイムに発動
Chrome変更後に発動リアルタイムに発動
FireFox変更後に発動リアルタイムに発動
iOS Safariリアルタイムに発動リアルタイムに発動

IEとSafariがおかしいのがわかりますね。

実際に試してみる

onchange

oninput


対処方法

onmouseupイベントを使用するとスライダーの「値が変更された時点」でイベントが発動します。

onmouseup

但し、スライダーにフォーカスがある場合はキーボードの矢印キー(↑↓←→)でも操作できますので、そのイベントも拾い上げるとよいと思います。





関連記事



公開日:2016年02月18日
記事NO:01779