PrimeFaces Spinner

It is an input text which provides increment and decrement buttons. It is used to get user input in a input text. We can create it by using <p:spinner> component in our JSF application. It has various attributes that are tabled below.

Spinner Attributes

Attribute	Default value	Type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It is used to specify the rendering of the component.
value	null	Object	It is used to set value of the component.
required	false	Boolean	It is used to mark component as required.
widgetVar	null	MethodExpr	It is used to set name of the client side widget.
stepFactor	1	Double	It is a stepping factor for each increment and decrement.
min	null	Double	It sets minimum boundary value.
max	null	Double	It sets maximum boundary value.
prefix	null	String	It is used to set prefix of the input.
suffix	null	String	It is used to set suffix of the input.
accesskey	null	String	It is an access key that when pressed transfers focus to the input element.
maxlength	null	Integer	It is used to set maximum number of characters that may be entered in this field.
onselect	null	String	It executes script when text within input element is selected by user.
placeholder	null	String	It specifies a short hint.
size	null	Integer	It sets number of characters used to determine the width of the input element.

Example

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

JSF File

// spinner.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>Spinner</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2" cellpadding="5" styleClass="ui-grid">
<h:outputLabel value="Spinner: " />
<p:spinner value="#{spinner.value1}" />
<h:outputLabel for="prefix" value="Spiner with Prefix: " />
<p:spinner id="prefix" value="#{spinner.value2}" prefix="$" min="0" />
</h:panelGrid>
<p:commandButton value="Submit" oncomplete="PF('dlg').show()" />
</h:form>
</h:body>
</html>

ManagedBean

// Spinner.java

package com.javatpoint;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Spinner {
private int value1;
private int value2;
public int getValue1() {
return value1;
}
public void setValue1(int value1) {
this.value1 = value1;
}
public int getValue2() {
return value2;
}
public void setValue2(int value2) {
this.value2 = value2;
}
}

Output: