JavaScriptでスライダーの選択項目の取得や変更を検知する方法

JavaScriptでスライダー メニューの選択項目の取得や変更を検知したい

input要素のtype属性をrangeに設定すると、スライダーが表示されます。

スライダーは最小値(min属性)と最大値(max属性)の範囲で、ユーザーが値を自由に決めることができます。

JavaScriptでスライダーの値を取得するには予めinput要素にID属性を指定しておき、それを参照してValueプロパティを取得する必要があります。

スタイダーなので数値型が返ってくると思いがちですが、Valueプロパティー文字列型なので、注意してください。

また、変更を検知するにはinputイベントchangeイベントを利用する必要があります。これらの違いは後述しています。

プロパティ

プロパティ意味
インプット要素.valueスライダの現在値文字列
インプット要素の仕様

イベント

イベント名動作
inputinput要素のtypeがrangeの場合、スライダー を動かしている最中イベントが繰り返し発火
changeinput要素のtypeがrangeの場合、スライダーを動かし終わった時に1度だけ発火
input type=”range”におけるイベントの仕様

サンプルコード

サンプルコードとしてスライダーの値を取得して、それをそのまま出力するコードを紹介します。

また選択肢の変化を検知し、反映するようにしています。(changeイベントを使っています。)

Output
Pug
form#targetArea
		.form-group
			input.form-control-range#targetRange(type="range" min="0" max="100")
	#formResult 
JavaScript
const targetResult = document.getElementById( 'formResult' );
const targetRange= document.getElementById( 'targetRange' );

//ページ読み込み時に1度処理
window.addEventListener('DOMContentLoaded', onChange );

//スライダーの変更を検知
targetRange.addEventListener( 'change', onChange );

function onChange() {
	targetResult.textContent = `現在の選択肢は【${targetRange.value}】です。`;
}
インストラクター