HTML and CSS Reference
In-Depth Information
Figure 6-6 An input element with the type search, as displayed in Google Chrome on Mac OS X.
The range type is used to collect a numeric value from a user that must be between a minimum and maximum
value; browsers will display a slider to help users input this value. Before HTML5 introduced the range type, creat-
ing a slider to collect a value from a user involved writing some fairly fancy JavaScript that tended to be a bit of a
Pro Tip: Displaying Recent Searches
If you add a results attribute to a search input element, WebKit-based browsers (Google Chrome and Safari)
will display a small magnifying glass in the input box. If the user clicks on this it will display her recent searches.
The value that you set in the results attribute tells the browser how many recent searches to display.
<input type=”search” results=”5”>
The results attribute is not officially part of the HTML5 specification, but it is an example of an instance when a
browser vendor will implement a new feature that will likely be added to the specification in the future.
The default range scale is between 0 and 100; however, you can change this using the max , min , and step attrib-
Figure 6-7 shows the interactive slider displayed to users.
Figure 6-7 An input element with the type range, as displayed in Google Chrome.
Here is an example of a basic <input> element with the type range that specifies a default scale of 0 to 1 with a
step of 0.01 (the minimum increment between values).
<input type="range" min="0" max="1" step="0.01">
The problem with range sliders in their default state is that users cannot actually see the value that they are selecting.
However, range sliders can be very useful for creating features like seek bars and volume controls. In Chapter 11 you
will use range sliders when creating custom controls for a video.
Search WWH ::

Custom Search