10.7. <rich:inputNumberSlider>

⁠10.7. `<rich:inputNumberSlider>`

The <rich:inputNumberSlider> component provides a slider for changing numerical values. Optional features include control arrows to step through the values, a tool-tip to display the value while sliding, and a text field for typing the numerical value which can then be validated against the slider's range.

⁠

Figure 10.5. <rich:inputNumberSlider>

⁠10.7.1. Basic usage

Basic use of the component with no attributes specified will render a slider with a minimum value of 0, a maximum of 100, and a gradient step of 1, together with a text field for typing the desired numerical value. The slider is labeled with the minimum and maximum boundary values, and a tool-tip showing the current value is shown while sliding the slider. The value attribute is used for storing the currently selected value of the slider. Standard conversion and validation for the JSF UIInput component is applied.

⁠10.7.2. Interactivity options

The text field can be removed by setting showInput="false".

The properties of the slider can be set with the attributes minValue, maxValue, and step.

The minimum and maximum labels on the slider can be hidden by setting showBoundaryValues="false". The tool-tip showing the current value can be hidden by setting showToolTip="false".

Arrow controls can be added to either side of the slider to adjust the value incrementally by setting showArrows="true". Clicking the arrows move the slider indicator in that direction by the gradient step, and clicking and holding the arrows moves the indicator continuously. The time delay for each step when updating continuously can be defined using the delay attribute.

⁠10.7.3. JavaScript API

The <rich:inputNumberSlider> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

getValue(): Get the current value of the slider control.
setValue(newValue): Set the value of the slider control to the newValue integer passed as a parameter.
increase(): Increase the value of the slider control by the gradient step amount.
decrease(): Decrease the value of the slider control by the gradient step amount.

⁠10.7.4. Reference data

component-type: org.richfaces.InputNumberSlider
component-class: org.richfaces.component.html.HtmlInputNumberSlider
component-family: org.richfaces.Input
renderer-type: org.richfaces.InputNumberSliderRenderer

⁠10.7.5. Style classes and skin parameters

⁠

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

Class (selector)	Skin Parameters	Mapped CSS properties
`.rf-insl` This class defines styles for the number slider itself.	No skin parameters.
`.rf-insl-trc` This class defines styles for the number slider track.	`controlBackgroundColor`	background-color
	`panelBorderColor`	border-bottom-color
`.rf-insl-trc-cntr` This class defines styles for the container of the number slider track.	No skin parameters.
`.rf-insl-mn` This class defines styles for the minimum label on the number slider.	`generalSizeFont`	font-size
	`generalFamilyFont`	font-family
	`generalTextColor`	color
	`panelBorderColor`	border-left-color
`.rf-insl-mx` This class defines styles for the maximum label on the number slider.	`generalSizeFont`	font-size
	`generalFamilyFont`	font-family
	`generalTextColor`	color
	`panelBorderColor`	border-right-color
`.rf-insl-inp` This class defines styles for the input field on the number slider.	`generalSizeFont`	font-size
	`generalFamilyFont`	font-family
	`generalTextColor`	color
`.rf-insl-inp-cntr` This class defines styles for the container of the input field.	No skin parameters.
`.rf-insl-hnd` This class defines styles for the handle on the number slider.	No skin parameters.
`.rf-insl-hnd-cntr` This class defines styles for the container of the handle.	No skin parameters.
`.rf-insl-hnd-sel` This class defines styles for the handle when it is selected.	No skin parameters.
`.rf-insl-hnd-dis` This class defines styles for the handle when it is selected.	No skin parameters.
`.rf-insl-dec`, `.rf-insl-inc` These classes define styles for the step controls to decrease and increase the number.	No skin parameters.
`.rf-insl-dec-sel`, `.rf-insl-inc-sel` These classes define styles for the step controls when they are selected.	No skin parameters.
`.rf-insl-dec-dis`, `.rf-insl-inc-dis` These classes define styles for the step controls when they are disabled.	No skin parameters.
`.rf-insl-tt` This class defines styles for the tool-tip on the number slider.	`generalSizeFont`	font-size
	`generalFamilyFont`	font-family
	`generalTextColor`	color
	`tipBorderColor`	border
	`tipBackgroundColor`	background-color