レシピ
フォーム
スライダーの値を取得する
スライダーで選択した値を取得する方法について解説します。
この記事のポイント
- スライダーで選択した値はvalueプロパティから取得する
スライダーで選択した値を取得する
フォームのスライダーで選択した値は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」と書いても同じように値を取得することができます。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。