The slider
component provides the user with the ability to input a value by using a slider bar. This component requires an input component to work properly.
As mentioned earlier, we first need to define an input component that will be used by the slider
component. The for
attribute is used to set the ID of the input component whose input will be provided by the slider
component. The basic definition of a slider would be as follows:
<h:inputText id="basicSlider" value="#{sliderBean.intValue}" /> <p:slider for="basicSlider" />
This will render an input text along with a horizontal slider bar as follows:
By default, the slider renders a horizontal bar for sliding. With the type
attribute, the slider can also be set to render a vertical bar with the value set as vertical
. The minValue
attribute defines the minimum value of the slider with the default value as 0
. The maxValue
attribute defines the maximum value of the slider with the default value as 100
.
By default, the slider provides animation when the background of the slider is clicked. This animation can be enabled/disabled with the animation
attribute by setting its value as true
or false
.
The step
attribute defines the amount of fixed pixels which increment the movement of the slider with the default value of 1
. The step
attribute only supports integer values:
<h:inputText id="steppingSlider" value="#{sliderBean.intValue}" /> <p:slider for="steppingSlider" step="10" />
With the display
attribute, we can display the output of the slider while getting input from the user by using an inputHidden
component. The display
attribute should refer the output
component while the for
attribute refers the hidden input field:
<h:outputText id="output" value="#{sliderBean.intValue}" /> <h:inputHidden id="displaySlider" value="#{sliderBean.intValue}" /> <p:slider for="displaySlider" display="output" />
The slider
component also provides a displayTemplate
attribute where we can provide a template while updating the display. A sample usage for the template could be as follows:
<h:outputText id="output" value="The value is: #{sliderBean.intValue}" /> <h:inputHidden id="displaySlider" value="#{sliderBean.intValue}" /> <p:slider for="displaySlider" display="output" displayTemplate="The value is: {value}" />
Here, {value}
is a placeholder definition that is being set by the number value selected in the spinner
.
By default, the slider
component does not disable the manual input. To get input only with the slider bar, without keyboard input, we need to define the onfocus
attribute as follows:
<h:inputText id="minMaxSlider" value="#{sliderBean.intValue}" onfocus="this.readOnly=true;" /> <p:slider for="minMaxSlider" step="10" minValue="0" maxValue="100" />
This will render an input field and a slider bar for which the user can enter values from 0
to 100
with an increment of 10
only by using the slider bar.
Range selection is also offered with the slider
where we can select a minimum and a maximum value. The range
attribute should be set to true
in order to achieve this and a comma-separated ID pair should be declared with the for
attribute, whose IDs are defined by the inputHidden
components.
The code snippet definition for the range selection is given here:
<h:outputText id="outputRange" value="The selected range: [#{sliderBean.rangeStart}, #{sliderBean.rangeEnd}]" /> <p:slider for="rangeStart,rangeEnd" style="width:200px" range="true" display="outputRange" displayTemplate="The selected range: [{min}, {max}]" /> <h:inputHidden id="rangeStart" value="#{sliderBean.rangeStart}" /> <h:inputHidden id="rangeEnd" value="#{sliderBean.rangeEnd}" />
The displayTemplate
attribute can be used with {min}
and {max}
placeholders when range selection is enabled. These placeholders will be updated by spinner
when the user selects his own range. The visual of the range selection is given in the following screenshot:
The slider
provides the slideEnd
AJAX behavior event that will be fired when the slide gets completed:
<h:inputText id="ajaxSliderInput" value="#{sliderBean.intValue}" /> <p:slider id="ajaxSlider" for="ajaxSliderInput"> <p:ajax event="slideEnd" listener="#{sliderBean.onSlideEnd}" update="growl" /> </p:slider>
The onSlideEnd
method will be invoked with org.primefaces.event.SlideEndEvent
. The current value of the slider can be retrieved with event.getValue()
, and a Faces message could be added with the current value, as in the following code snippet:
public void onSlideEnd(SlideEndEvent event) { int value = event.getValue(); MessageUtil.addInfoMessage("selected.value", value); }
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter3/slider.jsf
.
For details about the MessageUtil
class, see the Internationalization (i18n) and Localization (L10n) recipe in Chapter 1, Getting Started with PrimeFaces.