HTML5: Your visual blueprint™ for designing rich web pages and applications

CREATE A RANGE INPUT TYPE

You can use the range input type, new in HTML5, to create a sliding input field. Supported web browsers will display a slider bar and a thumb piece that can be moved left and right. The value of the input element changes depending on the position of the thumb piece:

<input type='range' name='field'
 value='number' min='number' max='number'
 step='number'>

Because the range input type is effectively a slider version of the number input type, it also supports the same optional min, max, and step attributes. If absent, min defaults to 0, max is 100, and step is 1. The value attribute automatically defaults to one-half of max minus min, or 50.

In WebKit browsers, you can customize the slider CSS itself. This is done by ...