Spinner


type: widget

release: 1.9

status: released

documentation: http://api.jqueryui.com/spinner/

demo: http://jqueryui.com/spinner/

 

TODOs   

 

 


 

1 - Description:

 

A spinner (stepper) is a simple widget that allows users to increment or decrement the current text box value without having to input it manually.  Increments do not have to be whole numbers -- it could be set to decimal values (0.1) or large increments (5) for each step. For a detailed discussion of Spinner behavior, please read:

 

Apple Human Interface Guidelines: Stepper (Little Arrows)

MSDN UI Guidelines: Spin Controls

 

Proposed features: 

 

Spinners are frequently used in a situation where there is a 'masked input' which essentially breaks what looks like a single text into multiple regions or zones that may have custom formatting or constraints. Although this is not technically part of the core spinner control, it needs to be considered by the developer so it will work in this situation. A good example of this is a time picker which has 3 zones that are all controlled by a single spinner. See a working example (recommended by Filament Group) here:

http://www.filamentgroup.com/examples/timepicker/

 

An example of good keyboard interaction with support for other formats such as date and time:

http://members.upc.nl/j.chim/ext/spinner2/ext-spinner.html

 


 

2 - Visual Design:

 

 

 


 

3 - Functional Specifications/Requirements:

 

A spinner is useful not only as a self standing widget but also as an integrated part of more complex widgets such as colorpickers, timepickers and datepickers. Hence the spinner should be made as extensible as possible and flexible enough to merge seamlessly into other widgets. 

 

When the spinner is not read only, the user may enter a value via the text field that causes an invalid value (below min, above max, step mismatch, non-numeric input). Whenever a step is taken, either programmatically or via the step buttons, the value will be forced to a valid value (see the description for stepUp() and stepDown() for more details).

 

The advanced spinner will use menu for dropdowns and slider for the scrubber.

 

In theory, the spinner should support ranges from -Number.MAX_VALUE to Number.MAX_VALUE. However, because numbers lose integer precision at 2^53, our rounding fails when (max || val) - (min || 0) > 2^53, preventing the user from stepping. If someone can provide a working BigNumber implementation, we should be able to support the full range.

 

Keyboard:

 

Accessibility:

 


 

4 - Markup & Style:

 

(only used prior to implementation)

 


 

5 - Latest version of plugin:

 

http://view.jqueryui.com/master/demos/spinner/default.html

 


 

6 - Open issues being discussed

 

none