Input Range Slider in HTML5

Introduction

In this article, we are going to see the new input range element of HTML5. The range element new to HTML5 is the Slider control. Actually, it is the "input" element but with a new type attribute called "range". The range element of HTML5 renders to the browser as a Slider control. The Slider control is a very intuitive user interface to set a number within a range.

HTML5 is here to save thousands of bytes in your code with the new input type. We can also use JavaScript and the HTML5 input type range element to make Sliders that change the background color of a page dynamically and shows the value of the Slider when the user increases or decreases the Slider. We can also associate many events of the Slider with the Slider control such as onchange and onmouseleave and performs various operations on the events using any scripting language. To create a Slider we must specify a range in the form of maximum and minimum values.

Many of the browsers do not support the Slider control. As usual, the designer behind each web browser has its own taste in rendering the user interface. The latest versions of Opera, Chrome, and Safari support this element of HTML5. The browsers that support this element shows the actual Slider control on the page but those Browsers that do not support it renders the <input type="range"> Slider as a normal textbox (<input type=" text">). In the later section, we will discuss this element with an example that shows the output on the different browsers.

Supported Browsers

This browser fully supports <input type="range">. Here we define two input type tags; one of them simply shows the value of the Slider and the other will change the background of the document. To define the Slider we have to specify some properties.

value: It specifies the value of the Slider. The default value is the minimum value plus half of the maximum value.
min: Minimum value of the range. The default minimum value is 0.
max: Maximum value of the range. The default maximum value is 100.
step: This sets the increment value of the Slider.

In this example, we use some JavaScript code and CSS with HTML5.

Here is the Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function myslide() {
var rd = parseInt(document.getElementById("red").value);
var rdh = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
var hex = "#" + rdh + "0000";
document.body.style.backgroundColor = hex;}
function showvalue(s)
{
var val =document.getElementById("firstslider").value;
document.getElementById("slidervalue").innerHTML = val;
}
</script>
<style>
h1{background-color:#000;
color:#ccc;
text-align:left;
}
</style>
</head>
<body>
<h1>Example of Input Slider</h1>
<input type="range" id="firstslider" value="10" min="0" max="100" step="2" onchange="showvalue(this.value)" />
<h1 id="h">Slider Value is: </h1><span id="slidervalue">10</span>
<br />
<h1>To Change the Background Color:</h1>
<input type="range" id="red" name="red" value="0" min="0" max="255" step="1" onchange="myslide()" />
</body>
</html>

Output

Unsupported Browsers

The browsers that support this element show the actual Slider control on the page but the browsers that do not support it renders the <input type="range"> Slider as a normal textbox (<input type=" text">).

Here is the Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function showvalue(s)
{
var val =document.getElementById("firstslider").value;
document.getElementById("slidervalue").innerHTML = val;
}
</script>
<style>
h1{background-color:#000;
color:#ccc;
text-align:left;
}
</style>
</head>
<body>
<h1>Example of Input Slider</h1>
<input type="range" id="firstslider" value="10" min="0" max="100" step="2" onchange="showvalue(this.value)" />
<h1 id="h">Slider Value is: </h1><span id="slidervalue">10</span>
</body>
</html>

Output