General
Support
Resources
Theming
Accessiblity
PrimeFlex
PrimeIcons
UI KIT
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
Form
AutoComplete
CascadeSelect
Chips
Inplace
InputGroup
InputMask
InputNumber
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
Slider
Slider is used to provide input in various ways.
<div class="card">
<h:form>
<p:growl id="growl" showDetail="true"/>
<h5 class="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="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="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>
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);
}
}
PrimeFaces v16.0.0-SNAPSHOT by
PrimeTek