HTML5 Data and Services Cookbook

Range input field

We sometimes want to input a value that is something the user picks from a given range of values using a "slider". In order to enable this in HTML5 the <input type="range" > was added allowing imprecise control for setting the element's value.

How to do it...

With few simple steps, we will create few range controls that use different features of HTML5:

1. We start by adding an HTML page using the following part of the body text:

   <form>
     <label>
       Select the range <input name="simpleRange" type="range" />
     </label>
     <br/>
     <label>
       Select within range <input id="vertical" name="simpleRangeLimited" min="20" max="100" type="range" />
     </label>
     <br/>
     <label>
       Custom step <input id="full" name="simpleRangeSteped"       type="range" value="35" min="0" ...