スライダーの変更イベントの対処方法[input type="range"]
HTML5で導入されたスライダーの値の変更検知イベントは、ブラウザによって動作が異なります。特にスライダーの値が変更した事によって重い処理を行う場合などに「リアルタイム」で何度も変更イベントが発生すると困ります。
今回はスライダーの変更イベントの発生を1回だけにする方法をご紹介します。
各ブラウザのスライダーイベント
onchangeイベント、oninputイベントが発動する条件をまとめました。
ブラウザ | onchange | oninput |
---|---|---|
IE11 | リアルタイムに発動 | 動作しない |
Edge | 変更後に発動 | リアルタイムに発動 |
Chrome | 変更後に発動 | リアルタイムに発動 |
FireFox | 変更後に発動 | リアルタイムに発動 |
iOS Safari | リアルタイムに発動 | リアルタイムに発動 |
IEとSafariがおかしいのがわかりますね。
実際に試してみる
onchange
oninput
対処方法
onmouseupイベントを使用するとスライダーの「値が変更された時点」でイベントが発動します。
onmouseup
但し、スライダーにフォーカスがある場合はキーボードの矢印キー(↑↓←→)でも操作できますので、そのイベントも拾い上げるとよいと思います。
スポンサーリンク
関連記事
公開日:2016年02月18日
記事NO:01779
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte