HTML5

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.
 
 
 
 
 
 


 
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

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.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button