6.11.9. < rich:inputNumberSpinner > available since 3.0.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.11.9. < rich:inputNumberSpinner > available since 3.0.0

expand all

#### 6.11.9.1. Description

A single line input field that lets selecting a number using controls near a text field. It's possible to change a value using "Up/Down" keyboard keys. The keyboard input in a field is possible if it isn't locked by the "enableManualInput" attribute. When arrow controls are pressed, the cursor can be moved in any way without losing a dragged state.

Figure 6.162. <rich:inputNumberSpinner> component

#### 6.11.9.2. Key Features

- Fully skinnable control and input elements

- 3D look and feel with an easily customizable appearance

- Attribute-managed positions of the controls (inside/outside of the input field)

- Keyboard controls support

- Optional disablement of the component on a page

- Optional "cycled" mode of scrolling values

- Optional manual/controls-only input into a value text field

- Validation of manual input

#### 6.11.9.3. Details of Usage

<rich:inputNumberSpinner> is used to facilitate your data input with rich UI Controls.

Here is the simplest variant of spinner definition with "minValue" , "maxValue" and "step" (on default is "1") attributes, which define the beginning and the end of numerical area and a spinner step.

Example:

    ...

    <rich:inputNumberSpinner minValue="1" maxValue="100"/>

    ...

It generates on a page:

Figure 6.163. Generated <rich:inputNumberSpinner>

There are also several attributes to define functionality peculiarities:

- "cycled" if the attribute is "true" after the current value reaches the border value it's be reversed to another border value after next increasing/decreasing. In other case possibilities of next increasing/decreasing are locked

- "disabled" is an attribute that defines whether a component is active on a page

- "enableManualInput" is an attribute that defines whether a keyboard input is possible or only UI controls could be used

Moreover, to add e.g. some JavaScript effects, events defined on it are used

- "onchange"

- "onmouseover"

- "onclick"

- "onfocus"

- "onmouseout"

- etc.

The "label" attribute is a generic attribute. The "label" attribute provides an association between a component, and the message that the component (indirectly) produced. This attribute defines the parameters of localized error and informational messages that occur as a result of conversion, validation, or other application actions during the request processing lifecycle. With the help of this attribute you can replace the last parameter substitution token shown in the messages. For example, {1} for `"DoubleRangeValidator.MAXIMUM"` , {2} for `"ShortConverter.SHORT"` .

#### 6.11.9.4. Reference Data

Table of <rich:inputNumberSpinner> attributes.

Table 6.199. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.inputNumberSpinner
component-class | org.richfaces.component.html.HtmlInputNumberSpinner
component-family | org.richfaces.inputNumberSpinner
renderer-type | org.richfaces.InputNumberSpinnerRenderer
tag-class | org.richfaces.taglib.InputNumberSpinnerTag

Table 6.200. Style classes (selectors) with the corresponding skin parameters

Class (selector) name | Description | Skin Parameters | CSS properties mapped
--- | --- | --- | ---
.rich-spinner-buttons | Defines styles for all buttons | headerBackgroundColor | background-color
panelBorderColor | border-color
.rich-spinner-input | Defines styles for a wrapper <td> element for input fields | buttonSizeFont | font-size
buttonFamilyFont | font-family
.rich-spinner-input-container | Defines styles for a container | controlBackgroundColor | background-color
panelBorderColor | border-color

Table 6.201. Style classes (selectors) without skin parameters

Class name | Description
--- | ---
.rich-spinner-c | Defines styles for a wrapper <table> element of a component
.rich-spinner-button | Defines styles for a button

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.11.9.5. Relevant Resources Links

On the component Live Demo page you can see the example of <rich:inputNumberSpinner> usage and sources for the given example.

- Prev6.11.8. < rich:inputNumberSlider > ...
- Top of page
- Front page
- Next6.11.10. < rich:suggestionbox > ...