HTML5 - SPLessons

HTML5 Slider

Chapter 29

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Slider

HTML5 Slider

shape 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

Slider Bar

shape 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.

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.

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.

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5 slider</title>
		<h1>Slider Bar</h1>
	</head>
	<body>
		<input type="range" />
	<body>
</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.

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5 slider</title>
		<h1>Slider Bar</h1>
	</head>
	<body>
		<input type="range"  min="0" max="100" />
	<body>
</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.

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

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.

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

Result

By running the above code in a preferred browser, following output is obtained.

Browser Support

shape Description

HTML5 Slider element is supported by all the latest browsers.Following are the browsers versions supported by HTML5.

Summary

shape 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.