Time for action – using the Spinner component

Let us see how we can use the Spinner component:

1. Create a Spinner component to hold a double value, say price, that steps by 0.25 with the $ prefix:

   <p:spinner value="#{spinnerController.price}" prefix="$" stepFactor="0.25" />

2. Create another Spinner component to hold a discount value with a % suffix and the discount value should be between 0 and 10:

   <p:spinner value="#{spinnerController.discount}" suffix="%" min="0" max="10" />

What just happened?

We have used the <p:spinner> component to create Spinner components with various features such as stepFactor, the min/max boundaries, and prefix/suffix.

However, even if you specify the min and max boundaries, the Spinner component will allow you to enter any value outside the boundaries directly in the text field. We can restrict entering the value in the Spinner input text field manually using the onkeydown event as follows:

<p:spinner value="#{spinnerController.discount}" suffix="%"...