HTML: Input Range Slider

Here is a input range slider:

Here is the HTML code:

<input id="slider1" type="range" min="1" max="100" step="1" value="7" >
<span id="showBox1"></span>

Here is the JavaScript code to display the value:

{
const slider1 = document.getElementById("slider1");
const showBox1 = document.getElementById("showBox1")

showBox1.textContent = slider1.value;

const f_update = (() => { showBox1.textContent = slider1.value;});

slider1.addEventListener ("input", f_update, false);
}

Min, Max, Step, Default

min

Start value. Default to 0.

max

End value. Default to 100.

step

inclement.

value

default value.