Home » HTML5 » HTML5 Range Slider Example

About Olayemi Odunayo

Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

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 a 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!

 

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

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz