RichFaces <rich:inputNumberSpinner>

This component is a single-line input field with buttons to increase and decrease a numerical value. It is used to input values by using provided spinner. The value can be changed using the corresponding directional keys on a keyboard, or by typing into the field.

Style classes and skin parameters

The following table contains the Style classes and corresponding skin parameters for the inputNumberSpinner.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-insp	It is used to define styles for the number spinner itself.	panelBorderColor	border-color
.rf-insp-inp	It is used to define styles for the input field on the number spinner.	generalSizeFont generalFamilyFont	font-size font-family
.rf-insp-btns	It is used to define styles for the buttons on the number spinner.	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.

Example

Here, in the following example, we are implementing <rich:inputNumberSpinner> component. This example contains the following files.

JSF File

// input-number-spinner.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Input Number Slider Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Select a value from the Spinner"></h:outputText><br/><br/>
<rich:inputNumberSpinner
minValue="10"
maxValue="100"
step="5"
>
</rich:inputNumberSpinner>
</h:form>
</h:body>
</f:view>
</ui:composition>

Output: