Submit your widget

jQuery UI Spinner - numeric stepper

Created 13 years ago   Views 32981   downloads 5096    Author
jQuery UI Spinner - numeric stepper
View DemoDownload
Share |



The following events fire when interacting with the Spinner via keyboard or mouse:

  • spinup - during value increment.
  • spindown - during value decrement.
  • spin - during value increment/decrement.
  • spinchange - when increment/decrement finishes.

To handle any of the above custom events simply bind them to the Spinner.

Example HTML:

<input type="text" id="#s1" />

Example [removed]

// Initialize the Spinner on #s1 if not done so already.

// Handle the Spinner change event.
$('#s1').bind('spinchange', function(event, ui) {

    // Place your code here.



When the Spinner is in focus the following keyboard interactions become available:

  • UP - spin up.
  • DOWN - spin down.
  • HOME - to minimum (if specified) or back to start.
  • END - to maximum (if specified).
  • TAB - move focus inside spinner.


The Spinner automatically applies the following CSS classes to specific elements:

  • ui-spinner - the spinner's encasing.
  • ui-spinner-disabled - indicates the spinner is in a disabled state.
  • ui-spinner-box - the container holding the value.
  • ui-spinner-up - the increment button
  • ui-spinner-down - the decrement button
  • ui-spinner-pressed - indicates a button is in the pressed state.
  • ui-spinner-list - for DOM lists.
  • ui-spinner-listitem - for DOM list items.

So as an example if your mark-up looks like this:

<input type="text" id="s1" value="10" />

The generated mark-up ends up like this:

<div class="ui-spinner">
  <input class="ui-spinner-box" type="text" id="s1" value="10" autocomplete="off" />
  <button class="ui-spinner-up" type="button">▲</button>
  <button class="ui-spinner-down" type="button">▼</button>