input range属性の値を取得するときのイベント

何かと便利なinput type=”range”ですが、
スライダー動作をさせた時の値の取得をする時、何のイベントハンドラが最適でしょうか。

大体のinputの取得はonChangeとかonKeyUp/Downとかそういうのだと思いますが、
スライダーをドラッグしながら値をインタラクティブに取得したい時、
ブラウザによってはonChangeでは上手くいかないことがあるようです。

主にChromeやFirefox等ですが、
onChangeだと、ドラッグ後にマウスを離した段階でイベントが発火し、そのポイントでの値を渡すようです。
つまり、ドラッグ中の値をぐりぐり取得したい場合は向かないことになります。

※Chromeもちょっと前までのVerではonChangeで良かったんですが、
 いつの間にかダメになっていました。

こうした時は、onInputを使います。
このイベントだと、ドラッグ中リアルタイムにイベント発生し、値が渡って行きます。

ただし、onInputは一部のブラウザ(IE10~11)等では使用出来ないので、
jQueryのonメソッド等ではchangeとinput両方を指定しておく方が良いみたいです。

コメント

タイトルとURLをコピーしました