Locale

Change the locale of the datepicker, schedule and client side validation messages.

Input Style

Free Themes

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

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

Bootstrap light blue and dark blue themes are also included in PrimeFaces 10.x builds for Elite subscribers.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

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
Basic Min Range
Basic Max Range
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="txt" value="#{sliderView.number1}"/>
            <p:slider for="txt" range="false"/>
        </h:panelGrid>

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

        <h5 class="p-mt-0">Basic Max Range</h5>
        <h:panelGrid columns="1" style="margin-bottom: 10px">
            <p:inputText id="sliderTxtMax" value="#{sliderView.number1}"/>
            <p:slider for="sliderTxtMax" range="max"/>
        </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" range="max"/>
        </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>