O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required