## Spinner Widget version added: 1.9

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

## Options

### cultureType: String

Default: `null`
Sets the culture to use for parsing and formatting the value. If `null`, the currently set culture in `Globalize` is used, see Globalize docs for available cultures. Only relevant if the `numberFormat` option is set. Requires Globalize to be included.

### disabledType: Boolean

Default: `false`
Disables the spinner if set to `true`.
Code examples:

Initialize the spinner with the disabled option specified:

`$(` `".selector"` `).spinner({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).spinner(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).spinner(` `"option"``,` `"disabled"``,` `true` `);`

### iconsType: Object

Default: `{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }`
Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.

- up (string, default: "ui-icon-triangle-1-n")
- down (string, default: "ui-icon-triangle-1-s")

### incrementalType: Boolean or Function()

Default: `true`
Controls the number of steps taken when holding down a spin button.
Multiple types supported:

- Boolean: When set to `true`, the stepping delta will increase when spun incessantly. When set to `false`, all steps are equal (as defined by the `step` option).
- Function: Receives one parameter: the number of spins that have occurred. Must return the number of steps that should occur for the current spin.

### maxType: Number or String

Default: `null`
The maximum allowed value. The element's `max` attribute is used if it exists and the option is not explicitly set. If `null`, there is no maximum enforced.
Multiple types supported:

- Number: The maximum value.
- String: If Globalize is included, the `max` option can be passed as a string which will be parsed based on the `numberFormat` and `culture` options; otherwise it will fall back to the native `parseFloat()` method.

### minType: Number or String

Default: `null`
The minimum allowed value. The element's `min` attribute is used if it exists and the option is not explicitly set. If `null`, there is no minimum enforced.
Multiple types supported:

- Number: The minimum value.
- String: If Globalize is included, the `min` option can be passed as a string which will be parsed based on the `numberFormat` and `culture` options; otherwise it will fall back to the native `parseFloat()` method.

### numberFormatType: String

Default: `null`
Format of numbers passed to `Globalize`, if available. Most common are `"n"` for a decimal number and `"C"` for a currency value. Also see the `culture` option.

### pageType: Number

Default: `null`
The number of steps to take when paging via the `pageUp`/`pageDown` methods.

### stepType: Number or String

Default: `null`
The size of the step to take when spinning via buttons or via the `stepUp()`/`stepDown()` methods. The element's `step` attribute is used if it exists and the option is not explicitly set.
Multiple types supported:

- Number: The size of the step.
- String: If Globalize is included, the `step` option can be passed as a string which will be parsed based on the `numberFormat` and `culture` options, otherwise it will fall back to the native `parseFloat`.

## Methods

### destroy()

Removes the spinner functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

### disable()

Disables the spinner.

- This method does not accept any arguments.

### enable()

Enables the spinner.

- This method does not accept any arguments.

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current spinner options hash.

- This method does not accept any arguments.

### option( optionName, value )

Sets the value of the spinner option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

### option( options )

Sets one or more options for the spinner.

- options
  Type: Object
  A map of option-value pairs to set.

### pageDown( [pages ] )

Decrements the value by the specified number of pages, as defined by the `page` option. Without the parameter, a single page is decremented.

- pages
  Type: Number
  Number of pages to decrement, defaults to 1.

### pageUp( [pages ] )

Increments the value by the specified number of pages, as defined by the `page` option. Without the parameter, a single page is incremented.

- pages
  Type: Number
  Number of pages to increment, defaults to 1.

### stepDown( [steps ] )

Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.

If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.

- steps
  Type: Number
  Number of steps to decrement, defaults to 1.

### stepUp( [steps ] )

Increments the value by the specified number of steps. Without the parameter, a single step is incremented.

If the resulting value is above the max, below the min, or reuslts in a step mismatch, the value will be adjusted to the closest valid value.

- steps
  Type: Number
  Number of steps to increment, defaults to 1.

### value() Returns: Number

Gets the current value as a number. The value is parsed based on the `numberFormat` and `culture` options.

- This method does not accept any arguments.

### value( value )

- value
  Type: Number or String
  The value to set. If passed as a string, the value is parsed based on the `numberFormat` and `culture` options.

### widget() Returns: jQuery

Returns a `jQuery` object containing the generated wrapper.

- This method does not accept any arguments.

## Events

### change( event, ui )

Triggered when the value of the spinner has changed and the input is no longer focused.

- event
  Type: Event
- ui
  Type: Object

### create( event, ui )

Triggered when the spinner is created.

- event
  Type: Event
- ui
  Type: Object

### spin( event, ui )

Triggered during increment/decrement (to determine direction of spin compare current value with `ui.value`).

Can be canceled, preventing the value from being updated.

- event
  Type: Event
- ui
  Type: Object
  - value
    Type: Number
    The new value to be set, unless the event is cancelled.

### start( event, ui )

Triggered before a spin. Can be canceled, preventing the spin from occurring.

- event
  Type: Event
- ui
  Type: Object

### stop( event, ui )

Triggered after a spin.

- event
  Type: Event
- ui
  Type: Object

Spinner wraps a text input, adds two buttons to increment and decrement the current value, along with handling key events for the same purpose. It delegates to Globalize for number formatting and parsing.

### 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.

Focus stays in the text field, even after using the mouse to click one of the spin buttons.

### Additional Notes:

- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

## Example:

#### Plain number spinner

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | `<!doctype html>` `<``html` `lang``=``"en"``>` `<``head``>` `` `<``meta` `charset``=``"utf-8"``>` `` `<``title``>spinner demo</``title``>` `` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.2.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.1/jquery-ui.js"``></``script``>` `</``head``>` `<``body``>` `<``input` `id``=``"spinner"``>` `<``script``>` `$( "#spinner" ).spinner();` `</``script``>` `</``body``>` `</``html``>`

#### Demo: