JavaScript - スライダーフォームの値をリアルタイムで取得する

JavaScriptでスライダーフォームの値をリアルタイムで取得する方法と簡単なコード例です。

HMLには値を取得する対象のスライダーフォームを設置しています。

<div>
	<p><input type="range" id="target" name="range" min="0" max="100" step="1" value="0"></p>
	<p id="output">Value : 0</p>
</div>

addEventListener()でスライダーフォームの入力イベントを実装しています。
「value」で現在の値を取得、id「output」に出力しています。

完全なリアルタイムではなく変更が確定した時に取得する場合は「input」ではなく「change」が利用できます。

// スライダーの入力イベントを作成
document.querySelector('#target').addEventListener('input', () => {

	// スライダーの値を取得
	let value = document.querySelector('#target').value;
	// スライダーの値を出力
	document.querySelector('#output').innerHTML = `Value : ${value }`;

});