Slider
Slider is used to provide input in various ways.
Documentation
<h:form>
<p:growl id="growl" showDetail="true" />
<h3 style="margin-top: 0">Basic</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="txt1" value="#{sliderView.number1}" />
<p:slider for="txt1" />
</h:panelGrid>
<h3>InputText Slider with Decimal Value </h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="decimal" value="#{sliderView.number2}" />
<p: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">
<p:inputNumber id="nmb1" value="#{sliderView.number3}" symbol=" €" valueChangeListener="#{sliderView.onInputChanged}">
<p:ajax process="@this" update="growl" />
</p:inputNumber>
<p:slider for="nmb1" />
</h:panelGrid>
<h3>Spinner Slider</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:spinner id="spinner1" value="#{sliderView.number3}" min="0" max="1000" stepFactor="50" suffix=" €" valueChangeListener="#{sliderView.onInputChanged}">
<p:ajax process="@this" update="growl" />
</p:spinner>
<p:slider for="spinner1" minValue="0" maxValue="1000" step="50" />
</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}" />
<p: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">
<p:inputText id="txt3" value="#{sliderView.number5}" />
<p:slider for="txt3" step="10" maxValue="70" />
</h:panelGrid>
<h3>Vertical Slider</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="txt4" value="#{sliderView.number6}" />
<p:slider for="txt4" type="vertical" />
</h:panelGrid>
<h3>Ajax Slider</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="txt5" value="#{sliderView.number7}" />
<p:slider for="txt5">
<p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd}" update="growl" />
</p: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}" />
<p: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}" />
<p:separator />
<p:commandButton value="Submit" update="display growl" oncomplete="PF('dlg').show();" />
<p: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>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class SliderView {
private int number1;
private float number2 = 0.2f;
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);
}
}
