	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Slider

Slider is used to provide input in various ways.

Slider Tag Documentation

Slider is used to provide input with various customization options like orientation, display modes and skinning.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side component.
animate	boolean	false	true	Boolean value to enable/disable the animated move when background of slider is clicked.
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage	String	false
disabled	boolean	false	false	Disables or enables the component.
display	String	false		Id of the component to display the slider value.
displayTemplate	String	false		String template to use when updating the display. Valid placeholders are {value}, {min} and {max}.
for	String	false		Id of the input text that the slider will be used for.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
maxValue	double	false	100.0	Maximum value of the slider.
minValue	double	false	0.0	Minimum value of the slider.
onSlide	String	false		Client side callback to execute during sliding.
onSlideEnd	String	false		Client side callback to execute when slide ends.
onSlideStart	String	false		Client side callback to execute when slide begins.
range	String	false	min	When set `true`, two handles are provided for selection a range. Another types `false` for disable range style and `max` for shows range handle to the slider max.
readonly	boolean	false	false	Flag indicating that this component will prevent changes by the user.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
step	double	false	1.0	Fixed pixel increments that the slider move in.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
submittedValue	Object	false
touchable	Boolean	false		Enable touch if supported by device. NULL uses global default or primefaces.TOUCHABLE. Default: globally enabled.
type	String	false	horizontal	Sets the type of the slider, "horizontal" or "vertical".
validator	Validator	false		A method expression referring to a method validating the input.
validatorMessage	String	false
value	Object	false		Value of the component.
valueChangeListener	ValueChangeListener	false		A method binding expression referring to a method for handling a valuchangeevent.

Name	Description
No records found.

Name	Type	Default	Description
slideEnd	SlideEndEvent	true	Fired when slide ends.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.Slider

Class org.primefaces.component.slider.Slider

Renderer Type org.primefaces.component.SliderRenderer

Renderer Class org.primefaces.component.slider.SliderRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

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="mt-0">Basic</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="txt" value="#{sliderView.number1}"/>
                <p:slider for="txt" range="false"/>
            </div>
        </div>

        <h5 class="mt-0">Basic Min Range</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="sliderTxtMin" value="#{sliderView.number1}"/>
                <p:slider for="sliderTxtMin"/>
            </div>
        </div>

        <h5 class="mt-0">Basic Max Range</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="sliderTxtMax" value="#{sliderView.number1}"/>
                <p:slider for="sliderTxtMax" range="max"/>
            </div>
        </div>

        <h5>InputText Slider with Decimal Value </h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="decimal" value="#{sliderView.number2}"/>
                <p:slider for="decimal" minValue="0.2" maxValue="7.1" step="0.1" range="max"/>
            </div>
        </div>

        <h5>InputNumber Slider</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputNumber id="nmb1" value="#{sliderView.number3}" symbol=" €"
                               valueChangeListener="#{sliderView.onInputChanged}">
                    <p:ajax process="@this" update="growl"/>
                </p:inputNumber>
                <p:slider for="nmb1"/>
            </div>
        </div>

        <h5>Spinner Slider</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <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"/>
            </div>
        </div>

        <h5>Hidden Input Slider with Display Value</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <h:outputText id="output" value="Set ratio to %#{sliderView.number2}"/>
                <h:inputHidden id="txt2" value="#{sliderView.number4}"/>
                <p:slider for="txt2" display="output" displayTemplate="Set ratio to %{value}"/>
            </div>
        </div>

        <h5>Slider with Step Factor</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="txt3" value="#{sliderView.number5}"/>
                <p:slider for="txt3" step="10" maxValue="70"/>
            </div>
        </div>

        <h5>Vertical Slider</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="txt4" value="#{sliderView.number6}"/>
                <p:slider for="txt4" type="vertical"/>
            </div>
        </div>

        <h5>Ajax Slider</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <p:inputText id="txt5" value="#{sliderView.number7}"/>
                <p:slider for="txt5">
                    <p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd}" update="growl"/>
                </p:slider>
            </div>
        </div>

        <h5>Range Slider</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-6 flex flex-column gap-3">
                <h:outputText id="displayRange" value="Between #{sliderView.number8} and #{sliderView.number9}"/>
                <p:slider for="txt6,txt7" display="displayRange" range="true"
                          displayTemplate="Between {min} and {max}"/>
            </div>
        </div>
        <h:inputHidden id="txt6" value="#{sliderView.number8}"/>
        <h:inputHidden id="txt7" value="#{sliderView.number9}"/>
    </h:form>
</div>


package org.primefaces.showcase.view.input;

import org.primefaces.event.SlideEndEvent;

import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.event.ValueChangeEvent;
import jakarta.inject.Named;

@Named
@RequestScoped
public class SliderView {

    private int number1 = 50;
    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);
    }
}