HTML: Input Range Slider

By Xah Lee. Date: . Last updated: .

Range Slider Example

Here is a input range slider:

Code

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.

HTML Input tutorial