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

min
Start value. Default to 0.
max
End value. Default to 100.
step
inclement.
value
default value.
βˆ‘ JS in Depth
XAH Β BUY NOW

JS in Depth

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js