Time for action – using the Slider component

Let us see how to use Slider as a range selector.

Create a Slider component with the range attribute set to true:

<h:panelGrid columns="1" style="margin-bottom:10px"> 
  <h:outputText id="displayRange" value="Between #{sliderController.minPrice} and #{sliderController.maxPrice}"/> 
  <p:slider for="minPriceId1,maxPriceId2" display="displayRange" style="width:300px" range="true" displayTemplate="Between {min} and {max}"/>
  <h:inputHidden id="minPriceId1" value="#{sliderController.minPrice}" />
  <h:inputHidden id="maxPriceId2" value="#{sliderController.maxPrice}" />
</h:panelGrid>

What just happened?

We have used the <p:slider> component along with the range="true" attribute, which makes it as range selector. We bound the Slider's min and max values to two...