HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of the newly added element is the HTML <input> tag of type range.
In this example we are going to learn how to work with this new element.
For this example we will use:
- A computer with a modern browser installed.
- notepad++.
1. Getting Started
The <input type=range> is used for input fields that should contain a value within a range. For example you have an image drawn on an HTML5 canvas and you want to give the user the ability to control the transparency level of the image. This can be accomplished with the HTML5 <input type=range>. This element allows a user choose a value within a range.
This control has been available in operating systems for decades, but only recently has found its way into the browser.
The reason for this delay is probably that it is easy to emulate the functionality with JavaScript alone.
Let’s take a look at the syntax for this element.
< input type="range" >
We can add it through JavaScript also. See the syntax below:
var x = document.createElement("INPUT");// create an input element
x.setAttribute("type", "range");// set its type
document.body.appendChild(x);//add it to the HTML file.
You can access an <input type=”range”> with JavaScript getElementById()
document.getElementById("ment")
//where ment is the ID of the element.
1.1 Properties Of The Slider Control
Let’s look at some of the properties of this element.
- autocomplete: With the autocomplete property you can set or return the value of the slider control.
- autofocus: You can use this property to set or get whether a slider should automatically get focus when page loads.
- defaultValue: With this property you can set the default value of the slider element or get the default value of the slider.
- disabled: This sets or gets whether the slider is available for user interaction.
- form: This property returns a reference to the form that contains the slider control.
- list: Returns a reference to the datalist that contains the slider control
- max: This property sets or returns the value of the max value of the slider control
- min: You can use this property to set or get the minimum value of the slider control.
- name: Sets or returns the value of the name attribute of a slider control.
- step: Sets or returns the value of the step attribute of the slider control.
- type: Returns which type of form element the slider control is.
- value: Sets or returns the value of the value attribute of a slider control.
Lets take a look at a simple example
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title> HTML5 Slider Control Example </title>
</head>
<body>
<input type=range autofocus min=1 max=10 step=1>
</body>
</html>
Another Example below
index2.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title> HTML5 Slider Control Example With Events </title>
</head>
<body onload=init()>
<script>
slide=null;
s=null;
// function called page loads
function init(){
slide=document.getElementById("slider"); // get a reference to the slider element
slide.addEventListener("change",handler,false);//add a listener to the slider
s=document.getElementById("hold"); // get a reference to the text box
s.value = slide.value;// set the text box value to the slider value
}
//function that is called when there is a change on the slider
function handler(){
s.value = slide.value;//set the text box value to the slider current value
}
</script>
<input id=slider type = range autofocus min = 1 max = 10 step = 1>
<input type=text id=hold>
</body>
</html>
NOTE: You should always write your javascript in a file which is different from your HTML file. In the above example we wrote both javascript and HTML in the same file for simplicity.
2. Summary
In this example we learnt about HTML5 slider control. We also gave detailed information on how to create and manipulate the slider.
3. Download the source code
Download
You can download the full source code of this example here: html5rangexample
