type: widget

release: 1.5

status: in planning

documentation: http://docs.jquery.com/UI/Slider

demo: http://jqueryui.com/demos/slider

 

 

---

 

1 - Description:

 

A slider allows a user choose from a continuous range of allowable values presented in a visual continuum. The simplest slider (G1) allows for a single point to be selected. A range of values can be selected by providing two sliders (G2) or having a combination of a slider with a fixed maximum (G3) or minimum (G4) value. Each of these slider types can also be presented hortzintally (G1-4) or vertically (G5). These should be able to be embedded into a page (G1-5, G8) or inserted into menus as small UI 'helpers' for form inputs or embedded controls (G6-7).

 

In the standard ThemeRoller slider, there is unfilled "track", one or two square sliders and a filled line that connects multiple sliders. We should provide a means to use the slider with a custom background image (G8).

 

Sliders should be able to be created by progressive enhancement techniques by scraping the values from a set of radio buttons, select options, unordered list or other html structures. The html > data utility will be instrumental for this. For a detailed example of a PE slider with axis labels and tooltip features, see Filament Group's example:

http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

 

 

Configuration options should include:

• horizontal/vertical orientation
• slider size (h,w) - determined via css
• number of sliders (1,2,3+?)
• array of specific values or min/max/increment (ex. 500-25,000 with increments of 25)
• x axis labels: auto show as many as you can fit or accept an increment (every 3 ticks) plus show min/mid/max labels
• x axis grouping labels
• tooltip of current value never/always/onDrag

 

There is an existing jQuery UI slider but it only supports horizontal sliders. PE support, axis labels and groupings, drag tooltips and other important features need to be added.

http://docs.jquery.com/UI/Slider

 

 

---

 

2 - Visual Design:

 

 

---

 

 

3 - Functional Specifications/Requirements:

 

Options/Methods/Callbacks

One handle slider (default)

• options:
  • animate (boolean, default: false)

    [Todd] Is this used to animate the handle to the next step for keyboard input or to move the handle to the next availble step when the stops event is fired from a mouse event?

    [Richard] This is used to animate every time the handle moves except when the user is moving it by dragging with the mouse.

  • max (float, default: 100)
  • min (float, default: 0)
  • orientation ('horizontal', 'vertical', 'detect', default: 'detect')
  • range (true, 'max', 'min', default: false)
  • step (float, default: 1)
  • value (float, default: 0)
  • values (array or floats, default: null)
• methods:
  • value (getter, setter)
• callbacks:
  • start (events: mousedown, keydown)
  • slide (events: drag, key held down)
  • stop (events: mouseup, keyup)
  • change (events: mouseup, keyup, click, value option/method)

 

Specifications

• max, min, step, value should be get/set as integers/floats
• min must be less than max
• horizontal slider - min is at left, max is at right
• vertical slider - min is at bottom, max is at top
• value will always change by an increment of step, whether by keyboard or mouse
• keydown HOME on handle sets value to min
• keydown END on handle sets value to max
• keydown UP on handle increases value by step, not greater than max
• keydown RIGHT on handle increases value by step, not greater than max
• keydown DOWN on handle decreases value by step, not less than min
• keydown LEFT on handle decreases value by step, not less than min
• in the case of one handle, the slider min/max are min/max for the handle
• in the case of two handles, and range true, each handle's min/max is set by the current value of other handle. The first handle's min is the slider min. The last handle's max is the slider max
• if there are more than two handles, or range is false, the slider min/max are min/max for each handle
• range: true only works with two handles
• range: 'min' and range: 'max' only work with one handle
• value option/method: the value option is not restricted by min/max/step. What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple)
• start callback: triggers when movement starts via mouse(mousedown) or keyboard(keydown). Not triggered by value option/method
• slide callback: triggers during movement via mouse(drag/mousemove) or keyboard(key held down). Not triggered by value option/method
• stop callback: triggers when movement stops via mouse(mouseup) or keyboard(keyup). Not triggered by value option/method
• change callback: triggers when the slider has stopped moving and has a new value (even if same as previous value), via mouse(mouseup) or keyboard(keyup) or value method/option
• mouse click (mousedown and mouseup without mousemove) triggers start, stop, change, but not slide

   

Changes from 1.5, 1.6rc2 in refactor

• 'axis' option was changed to 'orientation'
• 'handle' option removed
• 'handles' option removed
• 'steps'/'stepping' options removed in favor of 'step' option

  if you want 5 evenly divided pieces, specify

  min: 0, max: 5, step: 1

  or

  min: 0, max: 100, step: 20

• 'startValue' and 'moveTo' removed in favor of 'value' option and 'value' method

• 'round' option removed

• 'distance' option removed

• 'noKeyboard' option removed

• multiple axis removed - too complex for 1.6, and doesn't make sense considering our upcoming full refactor of slider. May need to be a separate plugin 

 

---

 

4 - Markup & Style:

 

4.1 Initial markup examples

 

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

 

4.2 Recommended transformed HTML markup demo with html and css (live view of svn):

 

View Demo Page: http://jquery-ui.googlecode.com/svn/trunk/tests/static/slider.html

 

 

 

4.3 Markup & style browser QA status

 

As of 12/12/08, static markup for this widget renders correctly in the following browsers.  (Correct rendering = true to design, with only small differences across browsers owing to differences in support of rounded corners, and native OS form element and font rendering.)

 

Please update this list as more browsers / platforms are tested.

 

	XP	Vista	Mac 10.5	Linux (Debian)
IE 6
IE 7
IE 8 beta
Firefox 2.0.0.18
Firefox 3.0.4
Safari 3.2
Opera 9.1
Opera 9.62
Chrome 1.0
Epiphany-Webkit

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

4.4 Accessibility recommendation

 

    See keyboard support discussion.

The slider requires the following ARIA attributes:

• role="slider"
• aria-valuenow="<numeric value>"
• aria-valuemin="<minimum value of the slider's range>"
• aria-valuemax="<maximum value of the slider's range>"
• Optional: aria-valuetext="<text version of the slider's value>", such as "20 dollar" or "100 MB"

 

For range sliders, one handle provides a boundary for the other handle (as range sliders handles can't pass each other). Because of this, changes to the first handle (representing the lower value of the range) need to trigger an update to  the "aria-valuemin" value of the second handle (representing the upper value of the range. Similarly, changes to the second handle need to trigger an update to the "aria-valuemax" value of the first handle.

 

Each handle needs to have an accessible name. This name can be set using either:

• A "title" attribute on the actual handle.
• An "aria-label" attribtue on the handle (not supported by IE8).
• An "aria-labelledby" attribute on the handle, referencing the ID of an element containing the label text. 
• A separate <label> element with a "for" attribute referencing the ID of the slider handler.

Note that only the last option is really useful for sighted keyboard users. For the other options, redundant visual text will have to be added for a sighted user to understand what the handle represents.

Regardless of how the accessible name is implemented, the developer needs to be able to specify it through widget parameters.

 

4.5 CSS & Theme

 

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

 

---

 

5 - Latest version of plugin:

 

http://jqueryui.com/demos/slider

 

---

 

6 - Open issues being discussed

 

I'd like to bring attention to the sliders because in their current form they don't support any labeling or feedback which can be a big usability problem. I've copied these items from the description above to see if I can get answers on whether we think we can get these features into the cleanup for 1.6rc3:

• x axis labels: auto show as many as you can fit or accept an increment (every 3 ticks) plus show min/mid/max labels

• x axis grouping labels

• tooltip of current value never/always/onDrag

   

 Example of a working version with these feature here on the Filament group site:

http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

 

How should multiple handles' min/max/value be get/set after init?

- [Richard] One option would be to grab each handle using a jQuery selector (using id, class, filter, index, :first, :last, :eq) and call .slider() on it (not init, just for options, methods), so you can access the handle's individual min, max, value using the same options/methods as the slider. This is quite a big change in terms of the jQuery UI API. Any other ideas?

 

 

---