Spinner

What is a spinner?

Spinner (also known as Numeric updown or Spin box) is a graphical control element or widget that allows changing a numerical value by rotating through numbers.

The appearance and uses of spinners

Spinners usually appear as two buttons with an up and down arrow icon next to a text box. In the image below, you can see a typical Spinner.

Spinner is used to change numbers such as the month number when selecting the date, hour and minute numbers when setting the clock, selecting pages and determining the number of copies to print, determining the amount of document margins in word processors, etc.

How to interact with a Spinner

Users can decrease or increase the number displayed in the text box by clicking the spinner buttons or pressing the up and down arrow keys. (Pressing the arrow keys will change the number when the spinner has the focus). In this way, by pressing the down arrow key or clicking on the down arrow button, the number inside the text box will decrease. By pressing the up arrow key or clicking on the up arrow button, the number inside the text box will increase. Usually, every time you press the up and down keys or click on the buttons, the number decreases or increases by one unit. However, the amount or step of change in the spinner may be less or more than one unit.

Don’t forget that in spinners, it is usually possible to change the number within an interval (specified by software developer or programmer). In other words, most of the time the number in the text box can be changed between a minimum and maximum number with the help of spinner.

In addition to the above methods, it is also possible to directly type the desired number in the text box. It is not possible to enter letters or numbers outside the range in the text box next to the spinner. You can also use the mouse wheel to increase or decrease this number.

Don’t forget that holding down the up and down arrow keys (instead of pressing them) usually increases speed of changing the number.

Spinner in HTML

In HTML, you can use the <input> element to receive numeric values on web pages. For this, you need to assign the value “number” to the type attribute in the starting tag of element, similar to the example below. Usually, the result of this element is rendered as a spinner on web pages.

<form action="/action_page.php">
   <label for="hour">Hour (between 1 and 24):</label>
   <input type="number" id="hour" name="hour" min="1" max="24" value="2">
   <br><br>
   <input type="submit" value="Submit">
</form>

The following image shows the result of the above example. In this element, the min and max attributes are used to specify the minimum and maximum allowed numbers, and the value attribute is used for the default value of the text box. You can also use the step attribute to specify the change step.