Mirage LIVE PREVIEW

Slider

Slider is used to provide input in various ways.

Documentation

Basic

InputText Slider with Decimal Value

InputNumber Slider

Spinner Slider

Hidden Input Slider with Display Value

Set ratio to %0.2

Slider with Step Factor

Vertical Slider

Ajax Slider

Range Slider

Between 30 and 80

Slider Values
Number 1: 0
Number 2: 0.2
Number 3: 0
Number 4: 0
Number 5: 0
Number 6: 0
Number 7: 0
Range: [30,80]
<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>