JavaScript - Get slider value in real-time

A method and simple code example to get slider value in real-time using JavaScript.

The HTML has a slider and output element to display value.

<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>

The slider input event is implemented with addEventListener().
The current value is gotten with "value" and output to the element with id "output".

To get value on change instead of real-time, "change" event can be used instead of "input".

// Slider input event 
document.querySelector('#target').addEventListener('input', () => {

	// Get slider value
	let value = document.querySelector('#target').value;
	// Output slider value
	document.querySelector('#output').innerHTML = `Value: ${value}`;

});