Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML5 Slider Control

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.

<input type="range" min="0" max="10" value="5">

A more complete example is shown below.

<input type="range" min="10" max="50" step="2" value="24">

Slider Control Attributes

minminimum value
maxmaximum value
stepamount of increment or decrement
valuestarting 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'>
<meta charset='utf-8'>

function displayNumber()
   var slideNum = document.getElementById("test").value;
   document.getElementById("show").value = slideNum;
window.onload = displayNumber;


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


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:
• HTML center Tag
• Aligning an Image on Your Web Page
• HTML DIV Basics
• HTML Special Characters - Character Entities
• Form Input Labels
• HTML5 Input Type - Email
• When to Use the nofollow Attribute value
• The HTML Head Tag
• HTML Frames Basics
• Meta Tag Basics

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268