<a:form> <a:growl id="growl" showDetail="true" /> <h3 style="margin-top: 0">Basic</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputText id="txt1" value="#{sliderView.number1}" /> <a:slider for="txt1" /> </h:panelGrid> <h3>InputText Slider with Decimal Value </h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputText id="decimal" value="#{sliderView.number2}" /> <a:slider for="decimal" minValue="0.2" maxValue="7.1" step="0.1" /> </h:panelGrid> <h3>InputNumber Slider</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputNumber id="nmb1" value="#{sliderView.number3}" symbol=" €" valueChangeListener="#{sliderView.onInputChanged}"> <a:ajax process="@this" update="growl" /> </a:inputNumber> <a:slider for="nmb1" /> </h:panelGrid> <h3>Hidden Input Slider with Display Value</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <h:outputText id="output" value="Set ratio to %#{sliderView.number2}" /> <h:inputHidden id="txt2" value="#{sliderView.number4}" /> <a:slider for="txt2" display="output" style="width: 200px" displayTemplate="Set ratio to %{value}" /> </h:panelGrid> <h3>Slider with Step Factor</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputText id="txt3" value="#{sliderView.number5}" /> <a:slider for="txt3" step="10" maxValue="70" /> </h:panelGrid> <h3>Vertical Slider</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputText id="txt4" value="#{sliderView.number6}" /> <a:slider for="txt4" type="vertical" /> </h:panelGrid> <h3>Ajax Slider</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <a:inputText id="txt5" value="#{sliderView.number7}" /> <a:slider for="txt5"> <a:ajax event="slideEnd" listener="#{sliderView.onSlideEnd}" update="growl" /> </a:slider> </h:panelGrid> <h3>Range Slider</h3> <h:panelGrid columns="1" style="margin-bottom: 10px"> <h:outputText id="displayRange" value="Between #{sliderView.number8} and #{sliderView.number9}" /> <a:slider for="txt6,txt7" display="displayRange" style="width: 400px" range="true" displayTemplate="Between {min} and {max}" /> </h:panelGrid> <h:inputHidden id="txt6" value="#{sliderView.number8}" /> <h:inputHidden id="txt7" value="#{sliderView.number9}" /> <a:separator /> <a:commandButton value="Submit" update="display" oncomplete="PF('dlg').show();" /> <a:dialog header="Slider Values" showEffect="fade" hideEffect="fade" widgetVar="dlg"> <h:panelGrid id="display" columns="1" cellpadding="5"> <h:outputText value="Number 1: #{sliderView.number1}" /> <h:outputText value="Number 2: #{sliderView.number2}" /> <h:outputText value="Number 3: #{sliderView.number3}" /> <h:outputText value="Number 4: #{sliderView.number4}" /> <h:outputText value="Number 5: #{sliderView.number5}" /> <h:outputText value="Number 6: #{sliderView.number6}" /> <h:outputText value="Number 7: #{sliderView.number7}" /> <h:outputText value="Range: [#{sliderView.number8},#{sliderView.number9}]" /> </h:panelGrid> </a:dialog> </a:form>
package com.jarch.showcase.view.input; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.context.FacesContext; import org.primefaces.event.SlideEndEvent; @ManagedBean public class SliderView { private int number1; private float number2; private int number3; private int number4; private int number5; private int number6; private int number7; private int number8 = 30; private int number9 = 80; public int getNumber1() { return number1; } public void setNumber1(int number1) { this.number1 = number1; } public float getNumber2() { return number2; } public void setNumber2(float number2) { this.number2 = number2; } public int getNumber3() { return number3; } public void setNumber3(int number3) { this.number3 = number3; } public int getNumber4() { return number4; } public void setNumber4(int number4) { this.number4 = number4; } public int getNumber5() { return number5; } public void setNumber5(int number5) { this.number5 = number5; } public int getNumber6() { return number6; } public void setNumber6(int number6) { this.number6 = number6; } public int getNumber7() { return number7; } public void setNumber7(int number7) { this.number7 = number7; } public int getNumber8() { return number8; } public void setNumber8(int number8) { this.number8 = number8; } public int getNumber9() { return number9; } public void setNumber9(int number9) { this.number9 = number9; } public void onInputChanged(ValueChangeEvent event) { FacesMessage message = new FacesMessage("Input Changed", "Value: " + event.getNewValue()); FacesContext.getCurrentInstance().addMessage(null, message); } public void onSlideEnd(SlideEndEvent event) { FacesMessage message = new FacesMessage("Slide Ended", "Value: " + event.getValue()); FacesContext.getCurrentInstance().addMessage(null, message); } }