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

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

        <h:outputLabel for="minMax" value="Min/Max: " />
        <a:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100" />

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

        <h:outputLabel for="ajaxSpinner" value="Ajax Spinner: " />
        <a:outputPanel>
            <a:spinner id="ajaxSpinner" value="#{spinnerView.number5}">
                <a:ajax update="ajaxSpinnerValue" process="@this" />
            </a:spinner>
            <h:outputText id="ajaxSpinnerValue" value="#{spinnerView.number5}" style="padding-left: 10px" />
        </a:outputPanel>
    </h:panelGrid>

    <a:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" />

    <a: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>
    </a:dialog>
</a:form>