JS DOM: input range slider 🎚

By Xah Lee. Date: . Last updated: .

Range Slider Example

Here is a input range slider:

Code

<div>
<input id="slider_ZNft6" type="range" min="1" max="100" step="1" value="7">
<span id="output_pF5cS"></span>
</div>
"use strict";
{
    const slider_ZNft6 = document.getElementById("slider_ZNft6");
    const output_pF5cS = document.getElementById("output_pF5cS");
    output_pF5cS.textContent = slider_ZNft6.value;
    const f_update = () => {
        output_pF5cS.textContent = slider_ZNft6.value;
    };
    slider_ZNft6.addEventListener("input", f_update);
}

Min, Max, Step, Default

min
Start value. Default to 0.
max
End value. Default to 100.
step
inclement.
value
default value.