YouTip

# jQuery UI API – Spinner Widget ## Category (#) ## Usage **Description:** Enhances a text input for entering numeric values, with up/down buttons and arrow key handling. **Added in version:** 1.9 The Spinner, or number stepper widget, is perfect for handling various numeric inputs. It allows the user to directly enter a value, or to change an existing value via the keyboard, mouse, or mouse wheel. When combined with Globalize, you can even spin through currencies and dates in different locales. The Spinner uses two buttons to overlay the text input with increment and decrement values. The Spinner adds key events so the same increment and decrement can be done with the keyboard. The Spinner represents the number formatting and parsing of (https://github.com/jquery/globalize). ### Keyboard Interaction * UP: Increment the value by one step. * DOWN: Decrement the value by one step. * PAGE UP: Increment the value by one page. * PAGE DOWN: Decrement the value by one page. After clicking a spin button with the mouse, the focus remains in the text field. When the spinner is not read-only (``), the user can enter a value, which may produce an invalid value (less than the minimum, greater than the maximum, mismatched step, non-numeric input). When incrementing or decrementing, either programmatically or via the spin buttons, the value is forced to a valid value (see the descriptions of [`stepUp()`](#) and [`stepDown()`](#) for details). ### Theming The Spinner widget uses the (#) to define its look and feel. To style the spinner specifically, use the following CSS class names: * `ui-spinner`: The outer container of the spinner. * `ui-spinner-input`: The `` element that the Spinner widget is instantiated on. * `ui-spinner-button`: The button controls used to increment or decrement the spinner value. The up button will additionally have a `ui-spinner-up` class, and the down button will have a `ui-spinner-down` class. ### Dependencies * (https://github.com/jquery/globalize) (external, optional; used with the [`culture`](#) and [`numberFormat`](#) options) ### Additional Notes * This widget requires some functional CSS, otherwise it won't 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 is not triggered when the element's value changes. * Creating a spinner on `` is not supported, as it would conflict with the native spinner UI. ## Examples A basic number spinner. $( "#spinner" ).spinner(); (#)