HTML and CSS Reference
In-Depth Information
Slider Custom Component
In this section we will implement the HTML5 range input element as a composite component. The purpose of the
range input is to allow the user to select a value in a range of numbers using the native slider control built into the
browser. Not all browsers support the range input, so like the date picker we will provide a fallback using JQuery-UI.
We will also support Ajax events, as they are particularly useful for a slider to provide instant feedback to the user
about the selected value.
Table
7-4
contains a list of attributes supported by the range input element. We will implement all the attributes
in our composite component. Examples of how the attributes are used can be found in Listing 7-20
Table 7-4.
Attributes Supported by the Range Input Element
Attribute
Data type
autocomplete
Boolean
list
String (reference to a datalist)
value
Number representing the value selected in the range
max
Upper bound in the range control
min
Lower bound in the range control
step
Numbers to step when using the range control
Listing 7-20.
Examples of Using HTML5 Range Input
<section>
<label for="without-value">Range (without value): </label>
<input id="withouth-value" type="range" />
</section>
<section>
<label for="min-to-max">Range (-10 to 10): </label>
<input id="min-to-max" type="range" min="-10" max="10" value="0" />
</section>
<section>
<label for="range-list">Range (list): </label>
<input id="range-list" type="range" value="0" list="list" />
</section>
<datalist id="list">
<option value="-100" />
<option value="-75" />
<option value="-50" />
<option value="-25" />
<option value="0" />
</datalist>
