O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

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

Using the range tag

HTML5 now allows us to create a whole new kind of input. The range tag creates a slider control, allowing the user to choose among a range of values. This used to be difficult, but not anymore! Check it out!

How to do it...

Interestingly, we can use virtually the same code as we did in the number example, but change the input type to "range". Here's how to do it:

<form>
<label>How many shoes would you like to purchase?<label>
<input type="range" name="quantity" min="2" max="6" step="2" value="2" />
</form>

Notice we can use the same optional min, max, step, value, and size attributes.

How it works...

Specifying <input type="range"> will display the new form control with a slider, allowing the user to increase and decrease the value ...

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