⁠10.8. <rich:inputNumberSpinner>

The <rich:inputNumberSpinner> component is a single-line input field with buttons to increase and decrease a numerical value. The value can be changed using the corresponding directional keys on a keyboard, or by typing into the field.
⁠
<rich:inputNumberSpinner>

Figure 10.6. <rich:inputNumberSpinner>

⁠10.8.1. Basic usage

Basic use of the component with no attributes specified will render a number spinner with a minimum value of 1, a maximum value of 100, and a gradient step of 1.
These default properties can be re-defined with the attributes minValue, maxValue, and step respectively. The starting value of the spinner is the minimum value unless otherwise specified with the value attribute.

⁠10.8.2. Interactivity options

When changing the value using the buttons, raising the value above the maximum or cause the spinner to restart at the minimum value. Likewise, when lowering below the minimum value the spinner will reset to the maximum value. This behavior can be deactivated by setting cycled="false", which will cause the buttons to stop responding when the reach the maximum or minimum value.
The ability to change the value by typing into the text field can be disabled by setting enableManualInput="false".

⁠10.8.3. JavaScript API

The <rich:inputNumberSpinner> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
getValue()
Get the current value of the spinner control.
setValue(newValue)
Set the value of the spinner control to the newValue integer passed as a parameter.
increase()
Increase the value of the spinner control by the gradient step amount.
decrease()
Decrease the value of the spinner control by the gradient step amount.

⁠10.8.4. Reference data

  • component-type: org.richfaces.InputNumberSpinner
  • component-class: org.richfaces.component.html.HtmlInputNumberSpinner
  • component-family: org.richfaces.Input
  • renderer-type: org.richfaces.InputNumberSpinnerRenderer

⁠10.8.5. Style classes and skin parameters

⁠

Table 10.8. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-insp
This class defines styles for the number spinner itself.
panelBorderColor
border-color
.rf-insp-inp
This class defines styles for the input field on the number spinner.
generalSizeFont
font-size
generalFamilyFont
font-family
generalTextColor
color
controlBackgroundColor
background-color
.rf-insp-btns
This class defines styles for the buttons on the number spinner.
headerBackgroundColor
background-color
panelBorderColor
border-left-color
.rf-insp-dec, .rf-insp-inc
These classes define styles for the step controls to decrease and increase the number.
No skin parameters.
.rf-insp-dec-dis, .rf-insp-inc-dis
These classes define styles for the step controls when they are disabled.
No skin parameters.