HTML: Input Range Slider

By Xah Lee. Date: . Last updated: .

Here's a input range slider:

Here's the HTML code:

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

Here's 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

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials