RichFaces <rich:inputNumberSlider>

It provides a slider for changing numerical values. It is used to select numerical value by selecting from the slider's range.

We can specify range by setting minimum and maximum values. By default a minimum value is set to 0 and maximum is 100. 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.

Style classes and skin parameters

The following table contains the Style classes (selectors) and corresponding skin parameters for the inputNumberSlider.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-insl	It is used to define styles for the number slider itself.	No skin parameters.
.rf-insl-trc	It is used to define styles for the number slider track.	controlBackgroundColor panelBorderColor	background-color border-bottom-color
.rf-insl-trc-cntr	It is used to define styles for the container of the number slider track.	No skin parameters.
.rf-insl-mn	It is used to define styles for the minimum label on the number slider.	generalSizeFont generalFamilyFont	font-size font-family
.rf-insl-mx	It is used to define styles for the maximum label on the number slider.	generalFamilyFont generalTextColor	font-family color
.rf-insl-inp	It is used to define styles for the input field on the number slider.	generalFamilyFont generalTextColor	font-family color
.rf-insl-inp-cntr	It is used to define styles for the container of the input field.	No skin parameters.
.rf-insl-hnd	It is used to define styles for the handle on the number slider.	No skin parameters.
.rf-insl-hnd-cntr	It is used to define styles for the container of the handle.	No skin parameters.
.rf-insl-hnd-sel	It is used to define styles for the handle when it is selected.	No skin parameters.
.rf-insl-hnd-dis	It is used to define 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	It is used to define styles for the tool-tip on the number slider.	generalSizeFont generalFamilyFont	font-size font-family

Example

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

JSF File

// input-number-slider.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 Range"></h:outputText><br/><br/>
<rich:inputNumberSlider 
minValue="10"
maxValue="100"
showArrows="true"
showTooltip="false"
step="5"
>
</rich:inputNumberSlider>
</h:form>
</h:body>
</f:view>
</ui:composition>

Output: