Spinner

Spinner is used to provide an input with increment and decrement buttons on an input text.

Documentation
0

Values
Value 1: 0
Value 2: 0.0
Value 3: 0
Value 4: 0
Value 5: 0
<style type="text/css">
    .ui-grid td {
        white-space: nowrap;
    }
</style>


<h:form>
    <h:panelGrid columns="2" cellpadding="5" styleClass="ui-grid">
        <h:outputLabel for="@next" value="Basic Spinner: " />
        <p:spinner id="basic" value="#{spinnerView.number1}" />

        <h:outputLabel for="@next" value="Step Factor: " />
        <p:spinner id="step" value="#{spinnerView.number2}" stepFactor="0.25" />

        <h:outputLabel for="@next" value="Min/Max: " />
        <p:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100" />
        
        <h:outputLabel for="@next" value="Rotate: " />
        <p:spinner id="rotate" value="#{spinnerView.number6}" min="0" max="10" rotate="true" />

        <h:outputLabel for="@next" value="Prefix: " />
        <p:spinner id="prefix" value="#{spinnerView.number4}" prefix="$" min="0" />

        <h:outputLabel for="ajaxSpinner" value="Ajax Spinner: " />
        <p:outputPanel>
            <p:spinner id="ajaxSpinner" value="#{spinnerView.number5}">
                <p:ajax update="ajaxSpinnerValue" process="@this" />
            </p:spinner>
            <h:outputText id="ajaxSpinnerValue" value="#{spinnerView.number5}" style="padding-left: 10px" />
        </p:outputPanel>
    </h:panelGrid>
    
    <br />
    
    <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" />

    <p:dialog header="Values" widgetVar="dlg" showEffect="fold" hideEffect="fold">
        <h:panelGrid id="display" columns="2" cellpadding="5">
            <h:outputText value="Value 1: " />
            <h:outputText value="#{spinnerView.number1}" />

            <h:outputText value="Value 2: " />
            <h:outputText value="#{spinnerView.number2}" />

            <h:outputText value="Value 3: " />
            <h:outputText value="#{spinnerView.number3}" />

            <h:outputText value="Value 4: " />
            <h:outputText value="#{spinnerView.number4}" />

            <h:outputText value="Value 5: " />
            <h:outputText value="#{spinnerView.number5}" />
        </h:panelGrid>
    </p:dialog>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.