HTML5 Range Input Type

HTML5 introduced new input type "range" which is quite similar to slider. It represents a numerical value within a given range. When you expect from user to select integer or float value within a given range, use this HTML5 new feature in your web page.

The following code shows how you rate yourself from 1 to 100 by setting the min and max attributes. You have enough flexibility to set the begining point for range using the value attribute.

Syntax

<input id="rate" type="range" min="1" max="100" value="0"/>

Here is a simple demo.
Rate Yourself:

The Range type input has a few interesting attributes which you may want to learn.

Attribute	Descriptions
Value	Set default value of range, if any.
Min	Set minimum value of the range if any. Default minimum value is 0.
Max	Set maximum value of the range if any. Default maximum value is 100.
Step	Set step in a given range, default value is 1 and only allowing integer number.
List	Datalist can be incorporated into range if browser support.

As of writing, only few browsers provide support for this new feature.

Browser Supports

Syntax

<input id="rate" type="range" min="1" max="100" value="0" Step = "10"/>

HTML5 Range Input Min and Max Example

Rate Yourself:

Syntax

<input id="rate" type="range" min="100" max="500" value="200" Step = "100"/>

HTML5 Range Input Min, Max and Step Example

Rate Yourself:

Syntax

<input id="rate" type="range" min="100" max="500" value="200"/>

HTML5 Range Input with Floating Example

Rate Yourself:

Example

<!DOCTYPE html>
<html>
<head>
	<!-- www.techstrikers.com -->
	<meta charset="utf-8">
	<title>HTML5 Color Input Type Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 Range input type Min and Max range with step</legend>
<table>
	<tr>
	<td>
	<label for="rate">Rate Yourself: </label>
	<input id="rate1" type="range" min="1" max="100" 
	value="0" Step="10" 
	onchange="javascript:document.getElementById('rateValue1').value = 
document.getElementById('rate1').value;">
<input id="rateValue1" type="text" size="2" value="0"/>   
</td></tr>
</table>
</fieldset>
	<fieldset>
<legend>HTML5 Range input type set Default Value</legend>
<table>
	<tr>
	<td>
	<label for="rate2">Rate Yourself: </label>
<input id="rate2" type="range" min="100" max="500" value="200" Step="100" 
	onchange="javascript:document.getElementById('rateValue2').value = 
document.getElementById('rate2').value;">
<input id="rateValue2" type="text" size="2" value="200"/>  
</td></tr>
</table>
</fieldset>
	<fieldset>
<legend>HTML5 Range input type with floating number</legend>
<table>
	<tr>
	<td>
	<label for="rate3">Rate Yourself: </label>
<input id="rate3" type="range" min="1.0" max="90.0" value="2.5" Step="1.5" 
	onchange="javascript:document.getElementById('rateValue3').value = 
document.getElementById('rate3').value;">
<input id="rateValue3" type="text" size="2" value="2.5"/>  
</td></tr>
</table>
</fieldset>
</body>
</html>

See Live Example

« Previous