Introduction
HTML5 Slider is an input tag and is used to render only a slider bar with a JavaScript library.Following are the concepts are covered.
- Slider Bar
- Browser Support
Description
Slider bar is used to give the input with slide option whose position represents the some value in a user specified range.The value on the left side shows minimum value and the right side shows the maximum value.User can slide the bar from the right to left. The image below demonstrates the slide bar.
The table below demonstrates the list of attributes is as shown.
The code below demonstrates the basic slider bar which have the same syntax like other input and is used to give the input is as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 slider</title>
<h1>Slider Bar</h1>
</head>
<body>
<input type="range" />
<body>
</html>
[/html]
Result
By running the above code in a preferred browser, following output is obtained.
The code below demonstrates the use of slider bar with range i.e with min and max values by using the attributes. Here the range should be o to 100 as shown in below code.
[html]
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 slider</title>
<h1>Slider Bar</h1>
</head>
<body>
<input type="range" min="0" max="100" />
<body>
</html>
[/html]
Result
By running the above code in a preferred browser, following output is obtained.
The code below demonstrates the generating the slide bar with the default value i,e 0 but user can give the his own values when the user renders the code the pin position should be at given value is as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 slider</title>
<h1>Slider Bar</h1>
</head>
<body>
<input type="range" min="0" max="50" value="25" />
<body>
</html>
[/html]
Result
By running the above code in a preferred browser, following output is obtained.
The code below demonstrates displaying the slider bar with the values.
[html]
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 slider</title>
<h1>Slider Bar</h1>
</head>
<body>
<input type="range" min="0" max="50" value="25" step="5" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser, following output is obtained.
| Attribute | Description |
|---|---|
| value | Which is an common input element. The value should be any floating number but it must be an integer. |
| min | Which shows the minimum value of the range the default value is zero. |
| max | Which shows the maximum value of the range the default value is 100. |
| step | which demonstrates the step scale factor of the slider the default value is the 1 and which allows integer numbers and the minimum value is not an integer. |
Description
HTML5 Slider element is supported by all the latest browsers.Following are the browsers versions supported by HTML5.
- Chrome 8.0
- Internet Explorer 10
- Mozilla Firefox 13
- Safari 5.1
- Opera 11.0
Points
- Slider bar is used to give the inputs.
- The Default value should be '0' but user can set the values.
- Slider bar range should be between 0 and 100.