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>
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 hidden input fields and displayed the selected range values using the displayTemplate
attribute.
Slider supports the slideEnd
AJAX event that is fired when...