HTML5 Range Slider Example

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.
 
 
 
 
 
 

Want to be an HTML5 Ninja?
Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!
In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!
I agree to the Terms and Privacy Policy

Thank you!

We will contact you soon.


 
For this example we will use:

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.

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

Exit mobile version