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

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

フォームのスライダーで選択した値は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" name="upload_file" min="0" max="10" value="3">
</form>

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

コード例

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

volume.addEventListener('change',function(){
	console.log(this.value);
});

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

まずはスライダーのinput要素をid属性で取得し、変数volumeに代入します。

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

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

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

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