スライダーの値を取得する

スライダーで選択した値を取得する

フォームのスライダーで選択した値はvalueプロパティから取得できます。
値はmin属性とmax属性の間になります。

解説用に次のHTMLコードを使います。
赤字になっている箇所が、スライダーになるinput要素です。

HTMLコード例

<form method="post" action="" enctype="multipart/form-data">
	<label for="input_volume">Volume</label>
	<input type="range" id="input_volume" min="0" max="10" value="3">
</form>

以下のコードは、スライダーから値を取得してconsole.logメソッドで出力します。

JSコード例

// スライダーのinput要素を取得
let volume = document.getElementById("input_volume");

volume.addEventListener('change',(e)=>{
	console.log(e.target.value); // 0〜10の間で選択された値を出力
});

スライダーで入力が動く度に値を取得して出力できるようにイベントリスナー「change」を設定します。

まずはスライダーのinput要素をid属性で取得して変数volumeに代入します。
続いて、先ほど取得したinput要素にaddEventListenerメソッドでイベントリスナーを登録します。
この時点で、スライダーが動くことをトリガーとして処理を実行できるようになります。

最後に、valueプロパティから値を取得してconsole.logメソッドで出力します。
今回はthisを使っていますが、「volume.value」と書いても同じように値を取得することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。