Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

Slider

Slider is used to provide input in various ways.

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

<div class="card">
    <h:form>
        <p:growl id="growl" showDetail="true"/>

        <h5 class="p-mt-0">Basic</h5>
        <h:panelGrid columns="1" style="margin-bottom: 10px">
            <p:inputText id="txt1" value="#{sliderView.number1}"/>
            <p:slider for="txt1"/>
        </h:panelGrid>

        <h5>InputText Slider with Decimal Value </h5>
        <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>

        <h5>InputNumber Slider</h5>
        <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>

        <h5>Spinner Slider</h5>
        <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>

        <h5>Hidden Input Slider with Display Value</h5>
        <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>

        <h5>Slider with Step Factor</h5>
        <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>

        <h5>Vertical Slider</h5>
        <h:panelGrid columns="1" style="margin-bottom: 10px">
            <p:inputText id="txt4" value="#{sliderView.number6}"/>
            <p:slider for="txt4" type="vertical"/>
        </h:panelGrid>

        <h5>Ajax Slider</h5>
        <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>

        <h5>Range Slider</h5>
        <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}"/>
    </h:form>
</div>