Basic JSF2 HTML5 Components - JSF and HTML5 - page 185

Figure 7-7. Native HTML5 support

Figure 7-8. Fallback to JQueryUI slider

Spinner Custom Component
Finally, we will implement the HTML5 number input element as a composite component. The purpose of the number
input is to allow the user to select a value in a range of number using a spinner control where the user can click up
or down, after which the selected value increments or decrements. Like all the other controls, all browsers do not
support the number control yet, so we will once again provide a fallback using JQuery-UI.
Table 7-5 contains a list of attributes supported by the number input element. We will implement all the
attributes in our composite component. Examples of how the attributes are used can be seen in Listing 7-23.

Table 7-5. Attributes Supported by the Number Input Element

Attribute Data type

Autocomplete Boolean

List String (reference to a datalist)

value

Number representing the value selected

max Upper bound in the spinner control

min Lower bound in the spinner control

step Numbers to step when using the spinner control

readonly Boolean

required

Boolean