Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML5 Slider Control

By Stephen Bucaro

The slider control (<input type="range"), sometimes referred to as a slider bar, displays a bar with an adjustment knob that a user can drag with their mouse pointer. As the user drags the knob, the slider control returns a numerical value which is within the range specified by the values assigned by the coder to the min and max attributes of the control.

Most browser renderings of a slider control do not display the numerical values for various locations of the knob, so the slider control is not designed for precision settings. The basic html code for a slider control is shown below.

A more complete example is shown below.

Slider Control Attributes

min minimum value

max maximum value

step amount of increment or decrement

value starting value

Shown below is some practical code to access the contents of the slider control. The additional attributes are id which allows the JavaScript getElementById method to access the element, and the onchange event to call the JavaScript function.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>

<script>
function displayNumber()
{
   var slideNum = document.getElementById("test").value;
   document.getElementById("show").value = slideNum;
}
window.onload = displayNumber;
</script>

</head>
<body>

<input type="text" id="show" size="4"><br />
<input type="range" id="test" min="0" max="12" step="2" value="4" onchange="displayNumber()">

</body>
</html>

Note that since the slider control itself does not display a value, the displayNumber function is called by the window.onload event to display the initial value assigned by the coder.

More HTML Code:
• The HTML Head Tag
• HTML5 Spinbox Control
• HTML SPAN Basics
• HTML5 Slider Control
• Providing Alternate and Title Text for an Image
• HTML Definition List
• HTML noscript Tag
• Using col and colgroup to Apply Attributes to a Table Column
• Web Color Names Table
• Easy Form Design