HTML5: Up and Running

Numbers As Sliders

Spinboxes, discussed in the preceding section, are not the only way to represent numeric input. You’ve probably also seen “slider” controls that look like Figure 9-8.

Figure 9-8. A slider

You can now have slider controls in your web forms, too. The markup looks eerily similar to that for spinbox controls:

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

The available attributes are the same as those for type="number"—min, max, step, value—and they mean the same thing. The only difference is the user interface. Instead of a field for typing, browsers are expected to render type="range" as a slider control. At the time of writing, the latest versions of Safari, Chrome, and Opera all do this. (Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its onscreen keyboard for numeric input.) All other browsers simply treat the field as type="text", so there’s no reason you can’t start using type="range" immediately.