View
 

Spinner

Page history last edited by Scott González 11 years, 11 months ago

type: widget

release: 1.9

status: released

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

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

 

TODOs   

  • For high contrast mode (once support for that is in core), unhide the ascii characters on the up/down buttons. 
  • Document accessibility info on https://developer.mozilla.org/en/aria/widgets/spinbutton  
  • Consider adding a title or live region, at least in documentation, to indicate that up/down arrow keys can be used 

 

 


 

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: 

  • the input box may have multiple focus points and essentially be several spinners combined into one.  Example: instead of using three separate spinners for hours/minutes/seconds, the input can contain all three (hh:mm:ss) and the user can focus on/change one segment at a time: http://www.filamentgroup.com/examples/timepicker/
  • we should consider building masked input features into editable spinners to help ensure valid entries: http://digitalbush.com/projects/masked-in 
  • support spinning via drag. This could be achieved by adding a small divider between the spinner buttons. This will allow the user to press and drag the divider up/down to change the spinner value. We could also spin according to speed of drag? This is a good example of spinning via drag: http://members.upc.nl/j.chim/ext/spinner2/ext-spinner.html

 

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:

  • 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 edit field, even after using the mouse to click one of the spin buttons. 

 

Accessibility:

  • Follows ARIA best practices, with the following exceptions:
    • left/right arrows don't modify the value since that prevents the user from moving the cursor which makes editing values manually very difficult.  
  • Issues:
    • JAWS announces the input as a spinbutton, instead of as a spinbox as it does for native controls.
    • JAWS doesn't announce that up and down arrows will modify the value. 

 


 

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 

 

Comments (0)

You don't have permission to comment on this page.