PrimeFaces Slider

It is a text input with slider. It is used to get user input with the help of slider. It allows us to increment and decrement input by using slider. The <p:slider> component is used to create slider input text. It also has various attributes that are tabled below.

Slider Attributes

Attribute	Default value	Type	Description
minValue	0	Integer	It is used to set minimum value of the slider.
maxValue	100	Integer	It is used to set maximum value of the slider.
style	null	String	It is used to set inline CSS of the container element.
animate	true	Boolean	It takes boolean value to set enable or disable of the animate feature.
type	horizontal	String	It is used to set type of slider. Whether it is horizontal or vertical.
step	1	Integer	It is used to set steps for the slider.
disabled	0	Boolean	It is used to disable slider. It takes boolean value.
onSlideStart	null	String	It is used to call client script on slider start event.
onSlideEnd	null	String	It executes client script on slide end.
range	false	Boolean	It is used to provide range.
displayTemplate	null	String	It is a string template.

Example

Here, in the following example, we are implementing <p:slider> component. This example contains the following files.

JSF File

// slider.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Input Slider</title>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<h3 style="margin-top: 0">PrimeFaces InputText Slider</h3>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="user-name" value="#{slider.value}" />
<p:slider for="user-name" />
</h:panelGrid>
<br/>
<p:commandButton value="Submit" />
</h:form>
</h:body>
</html>

ManagedBean

// Slider.java

package com.javatpoint;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Slider {
private int value;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}

Output: