jQuery UI API - Spinner Widget

Usage

Description: Enhances a text input for entering numeric values, with up/down buttons and arrow key handling.

Version Added: 1.9

The Spinner, or number stepper control, is an ideal control for handling various numeric inputs. It allows users to directly enter a value or increment/decrement an existing value using the keyboard, mouse, or scroll wheel. When combined with Globalize, you can even spin to display different regional currencies and dates.

The Spinner uses two buttons to overlay the text input with increment and decrement values of the current value. It adds key events to allow the same increment and decrement with the keyboard. The Spinner represents the numeric formatting and parsing of Globalize.

Keyboard Interaction

UP: Increments the value by one step.
DOWN: Decrements the value by one step.
PAGE UP: Increments the value by one page.
PAGE DOWN: Decrements the value by one page.

After clicking the spinner buttons with the mouse, the focus remains on the text field.

When the Spinner is not read-only (<input readonly>), users can enter values, which may result in invalid values (less than the minimum, greater than the maximum, mismatched increments/decrements, non-numeric input). When incrementing or decrementing, whether programmatically or via the spinner buttons, the value is forced to a valid value (for more details, see the descriptions of stepUp() and stepDown()).

Theming

The Spinner Widget uses the jQuery UI CSS Framework to define its appearance and style. To use the styles specific to the Spinner, you can use the following CSS class names:

ui-spinner: The outer container of the spinner.
ui-spinner-input: The <input> element instantiated by the Spinner Widget.
ui-spinner-button: The button control used to increment or decrement the spinner value. The up button additionally has a ui-spinner-up class, and the down button has a ui-spinner-down class.

Dependencies

UI Core
Widget Factory
Button Widget
Globalize (external, optional; when used with the culture and numberFormat options)

Additional Notes

This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.
This widget manipulates the element's value programmatically, so the native change event will not be triggered when the element's value changes.
Creating a spinner on <input type="number"> is not supported, as it would conflict with the native spinner UI.

Example

A standard number spinner.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner Widget Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<input id="spinner">

<script>
$( "#spinner" ).spinner();
</script>

</body>
</html>

View Demo

❮ Api Css Framework Api Selectable ❯