Input Range Slider in HTML5

Gaurav Gupta
12y
18k
0
0

Article

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 their own taste in rendering the user interface. The latest versions of Opera, Chrome and Safari supports 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">

<head>

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>

<h1 id="h">Slider Value is: </h1><span id="slidervalue">10</span>

<br />

<h1>To Change the Background Color:</h1>

</body>

</html>

Output

Unsupported Browsers: The browsers that support this element shows 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">

<head>

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>

<h1 id="h">Slider Value is: </h1><span id="slidervalue">10</span>

</body>

</html>

Output

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all