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.

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

AttributeDescriptions
ValueSet default value of range, if any.
MinSet minimum value of the range if any. Default minimum value is 0.
MaxSet maximum value of the range if any. Default maximum value is 100.
StepSet step in a given range, default value is 1 and only allowing integer number.
ListDatalist 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

Syntax

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

HTML5 Range Input Min, Max and Step Example

Syntax

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

HTML5 Range Input with Floating Example

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