General
Support
Resources
Theming
Accessiblity
PrimeBlocks
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
BarNew
BubbleNew
DoughnutNew
LineNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Charts
BarDeprecated
BubbleDeprecated
DonutDeprecated
LineDeprecated
PieDeprecated
ScatterDeprecated
PolarAreaDeprecated
RadarDeprecated
MixedDeprecated
InteractiveDeprecated
ExportDeprecated
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
Spinner
Spinner is used to provide an input with increment and decrement buttons on an input text.
<div class="card">
<h:form>
<div class="ui-fluid formgrid grid">
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Basic Spinner"/>
<p:spinner id="basic" value="#{spinnerView.number1}"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Step Factor"/>
<p:spinner id="step" value="#{spinnerView.number2}" stepFactor="0.25"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Min/Max"/>
<p:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Rotate"/>
<p:spinner id="rotate" value="#{spinnerView.number6}" min="0" max="10" rotate="true"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Rotate + No Wheel"/>
<p:spinner id="rotateNoWheel" value="#{spinnerView.number6}" min="0" max="10" rotate="true" modifyValueOnWheel="false"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Rounded"/>
<p:spinner id="rounded" value="#{spinnerView.number7}" min="0" max="55" stepFactor="5" round="true"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Prefix"/>
<p:spinner id="prefix" value="#{spinnerView.number4}" prefix="$" min="10" max="50"/>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Horizontal"/>
<p:spinner id="horizontal" value="#{spinnerView.number8}" buttons="horizontal" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Horizontal after"/>
<p:spinner id="horizontalAfter" value="#{spinnerView.number9}" buttons="horizontal-after"
upButtonStyleClass="ui-button-success" downButtonStyleClass="ui-button-danger"/>
</div>
</div>
<div class="ui-fluid formgrid grid">
<div class="field col-12 md:col-1">
<p:outputLabel for="@next" value="Vertical"/>
<p:spinner id="vertical" value="#{spinnerView.number10}" buttons="vertical"
upButtonStyleClass="ui-button-secondary" downButtonStyleClass="ui-button-secondary"/>
</div>
</div>
</h:form>
</div>
@Named
@RequestScoped
public class SpinnerView {
private int number1;
private double number2;
private int number3;
private int number4 = 15;
private int number5;
private int number6;
private int number7;
private int number8;
private int number9;
private int number10;
public int getNumber1() {
return number1;
}
public void setNumber1(int number1) {
this.number1 = number1;
}
public double getNumber2() {
return number2;
}
public void setNumber2(double 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 int getNumber10() {
return number10;
}
public void setNumber10(int number10) {
this.number10 = number10;
}
}
PrimeFaces v14.0.0 by
PrimeTek