JavaScript | スライダー（range）の変更イベントを実装する方法
JavaScriptでフォームパーツのひとつ、スライダー（range）の変更をトリガーにしたイベントの実装方法を、決定時とリアルタイム取得と2パターンで動作サンプル、サンプルコードで紹介しています。
スライダー（range）の変更イベント
JavaScriptを使ってスライダー（range）の入力・変更をトリガーとして、その値を取得するイベントのシンプルな動作サンプルとサンプルコードです。
サンプルでは、スライダーの値の変更時（ドラッグを外した時）と、つまみの移動中の値をリアルタイムに取得する2つのパターンを紹介しています。
See the Pen JavaScript | Radio Button Event by yochans (@yochans) on CodePen.
HTMLにはスライダーの値の変更時（ドラッグを外した時）と、つまみの移動中の値をリアルタイムに取得する用のふたつの input type="range" タグを用意しました。
pタグの「.output1」「.output2」は動作テストの出力用になります。
<p><input type="range" name="range1" min="0" max="100" step="1" value="20"></p>
<p id="output1">Value : 20</p>
<p><input type="range" name="range2" min="0" max="100" step="1" value="20"></p>
<p id="output2">Value : 20</p>スライダー要素の取得にはquerySelector()を利用しています。
input[type=’range’] でも input[name=’range1′] でも取得可能ですが、コンテンツが大きい場合の重複を避けるため input[type=’range’][name=’range1′] としています。
関連：JavaScript | querySelector()とquerySelectorAll()の使い方、指定方法まとめ | ONE NOTES
実装時にclass名を付与している予定の場合、getElementByIdでも問題ありません。
発火イベントは要素に対して、addEventListener()メゾッドにてを指定しています。
「change」を指定した場合、つまみをドラッグして離した時にイベントが発火します。
「input」を指定した場合、つまみを動かしている間、リアルタイムに値を取得し続けます。
// 変更時に取得
let range1 = document.querySelector(`input[type='range'][name='range1']`);
range1.addEventListener(`change`, function () {
document.querySelector(`#output1`).innerHTML = `Value : ${range1.value}`;
});
// リアルタイムに取得
let range2 = document.querySelector(`input[type='range'][name='range2']`);
range2.addEventListener(`input`, function () {
document.querySelector(`#output2`).innerHTML = `Value : ${range2.value}`;
});以下は、上記サンプルコードのアロー関数バージョンとなります。
// 変更時に取得
let range1 = document.querySelector(`input[type='range'][name='range1']`);
range1.addEventListener(`change`, () => {
document.querySelector(`#output1`).innerHTML = `Value : ${range1.value}`;
});
// リアルタイムに取得
let range2 = document.querySelector(`input[type='range'][name='range2']`);
range2.addEventListener(`input`, () => {
document.querySelector(`#output2`).innerHTML = `Value : ${range2.value}`;
});