Unobtrusive Slider Control V2

I recently wanted to fix a few bugs within last years slider experiment but, as my coding style has changed so dramatically over the past year (believe me, I’ve learned a lot in the past year and find it hard to even look at my old code), I ended up rewriting the entire thing from scratch.

This gave me the opportunity to make the code more robust, fix the aforementioned bugs and add some nice shiny new features into the mix.

In brief…

• Conforms to the WAI-ARIA defined role of “slider”
• More robust Javascript code written to current “best practices”
• Both the slider’s range and increment can accept positive or negative values
• Both the range and the increment can be set to Float or Integer values
• A second “maximum increment” can be defined to use for mouseWheel and keyboard events
• mouseWheel support can be disactivated on a full-page or individual slider basis
• Callback functions can now be defined for the update, create, destroy, redraw and move events
• Skinnable using only CSS i.e. there are no messy in-script image paths to edit

The impatient amongst you may wish to have a quick look at the available demos before reading any further.

Configuring the slider

Sliders can be associated with both text input and select list form elements. All of the slider’s configuration parameters should be defined within the associated form element’s className as described below.

Stipulating the slider’s numeric range

If using a select list as the slider’s associated form element, it is not necessary to set a range (as the script will calculate this automatically by using the number of options present within the select list itself). You are however required to add the class fd_slider to the select list’s className.

If using a text input, add the class fd_range_limit1_limit2 to the associated input’s className, where limit1 and limit2 are replaced with the numeric values you wish the slider to use e.g. the class ‘fd_range_-255_255’ will give the slider a numeric range of -255 to 255. This is a required class – without it, no slider control is created for text input elements. The limit1 is displayed to the left of horizontal sliders and the top of vertical sliders and limit2 to the right of horizontal sliders and the bottom of vertical sliders – this enables you to have inversed ranges as shown within the vertical slider demo.

Should you wish to stipulate a range containing decimal places, just use the format fd_range_XXdYY_XXdYY, where XX represents the integer part and YY the decimal part. The literal character d is required and gets converted to a decimal point automatically by the script e.g. the classname ‘fd_range_-20d2_20d2’ will give the slider a numeric range of -20.2 to 20.2.

If no range is stipulated, it automatically defaults to the values 0 – 100.

The slider’s numeric increment

Sliders associated with a text input can also have an increment stipulated by using a class of the form fd_inc_XX where XX represents the increment to use. As with the range, the increment can also contain decimal places e.g. the class fd_inc_0d20 will set an increment of 0.2 and the class fd_inc_40 an increment of 40.

Decimal place precision

Additionally, the number of decimal places used to format the associated input element’s return value is calculated by using the number of decimal places stipulated within the increment e.g. the class fd_inc_0d400 will set an increment of 0.4 and set the result to have three decimal places (as there are three characters after the decimal point e.g. “400”) whereas the class fd_inc_0d4 will still set an increment of 0.4 but set the result to have just one decimal place (as there is only one character after the decimal point e.g. “4”). An example of using decimal values for both the range and increment and also stipulating the return value precision can be seen within the vertical slider demo.

If no increment is set, the script defaults to using a value of 1.

MouseWheel and keyboard event increments

The slider can now use a different increment when reacting to both mouseWheel and keyboard events. This is stipulated in an identical fashion to the normal increment but uses the class fd_maxinc_XX, where XX again represents the decimal/integer value of the increment.

If no fd_maxinc_XX class is located, the script defaults the maximum increment to double the value of the normal slider increment.

MouseWheel support

Once a slider has focus, the mouseWheel can be used to move the slider handle. The slider handle will move by the maximum increment (fd_maxinc) should one have been defined or by two times the normal increment if no fd_maxinc was defined.

Disabling mouseWheel support

MouseWheel support can be disabled for all sliders appearing on the same page or on an individual basis.

Disabling mouseWheel support for all sliders

MouseWheel support can be disabled for all sliders appearing on the same page by calling the fdSliderController.disableMouseWheel() method after the script has been included in your page. An example of this is shown below:

  
  <script type="text/javascript" src="the/path/to/slider.js">
  </script>
  <script type="text/javascript">
  //<![CDATA[
  // Disable the mouseWheel support for all sliders on the page
  fdSliderController.disableMouseWheel();
  //]]>
  </script>
  
  

Disabling mouseWheel support for individual sliders

To disable the mouseWheel for individual sliders, just add the class fd_disable_mousewheel to the associated form element’s className.

The available handle animation effects

Whenever a user clicks on the slider bar (not the slider handle), there are three possible effects that can be used:

The “animated tween” option

Should the associated form element’s className contain fd_tween, clicking on the slider bar initiates a tween animation that scrolls the slider’s “drag-handle” to the point in which the mouseDown event occurred (to be more precise, it scrolls the handle to the nearest “exact value” point).

The “jump to value” option

Should the associated form element’s className contain fd_jump, clicking on the slider bar immediately moves the slider’s “drag-handle” to the point in which the mouseDown event occurred (again, to be more precise, the handle jumps to the nearest “exact value” point).

The “timed scroll” option

Should none of the above two classes be located, the slider defaults to scrolling the slider drag-handle by the defined maximum increment (fd_maxinc) in the direction of where the mouseDown event occurred.

An example of each type of animation effect can be seen within the handle movement demo.

Callback functions

Callback functions can now be defined for the update, create, destroy, redraw and move events.

To stipulate a callback function, give the associated input a class of the form fd_slider_cb_callbackType_callbackFunctionName e.g. the class ‘fd_slider_cb_update_updateColor’ will get the slider to call the javascript function ‘updateColor()’ each time the associated form element’s value is changed and the class ‘fd_slider_cb_move_positionTooltip’ will get the slider to call the javascript function ‘positionTooltip()’ each time the slider’s handle moves.

Multiple callback functions can be declared for the same event by repeating the class e.g. the class “fd_slider_cb_update_updateFunc1 fd_slider_cb_update_updateFunc2” will tell the slider to call the functions “updateFunc1()” and “updateFunc2()” whenever the update event fires. When multiple functions are defined for the same event, they are called in the order in which they were defined.

A quick word on callback function names

As callback function names are being declared within a CSS className, the function name itself is limited to the set of alphanumeric characters valid for use within such a CSS className i.e. while the character “$” is a valid JavaScript function name, it is not a valid character for use within a CSS className and so should be avoided.

Stipulating an Object.method as a callback function

It is now possible to stipulate an object method as a callback function. Object.methods can be stipulated by converting the “dots” (i.e. the full-stops) to minus signs (-); for example, the className “fd_cb_update_myObject-myMethod” will tell the script to call the “myMethod” method of the JavaScript Object “myObject” e.g. myObject.myMethod();

The callback function data object

All callback functions are passed an object of the form:

  
 {
 elem:[the slider's associated form element],
 value:[the associated form element's current value]
 }
  
 

Hiding the associated form element

Giving the form element a class of fd_hide_input will do exactly that, and hide the associated element on slider creation (the default functionality is to keep the form element visible).

Form elements are hidden by giving them the class “fd_hide_slider_input”. Currently, this class just sets the element’s display property to “none” and so the value will still be submitted to the server – unfortunately, setting an element to display “none” makes it unavailable to some assistive technologies, and until assistive technology can use the ARIA information sent by the browser, it is recommended that you keep the input displayed.

Alternatively, you can change the “fd_hide_slider_input” class definition to use absolute positioning as described within the webAIM article CSS in Action: Invisible Content Just for Screen Reader Users.

Creating vertical sliders

Vertical sliders can be created by adding the class fd_vertical to the associated form element’s className.

Styling the slider

Sliders can have additional classes given to them (to enable you to style them differently to the others) by adding classes of the form fd_slider_cn_yourclassnamehere to the associated form element’s className e.g. the class ‘fd_slider_cn_hunkydory’ will give the associated slider control an extra class of ‘hunkydory’.

Additionally each slider control is given a unique ID of the form ‘fd-slider-theAssociatedInputElementsId’. This enables you to target individual sliders within the CSS and also enables DOM access to the top level slider div by using document.getElementById.

The dynamically created HTML

The following HTML is used to create the slider:

  
 <div id="fd-slider-[form element id]" 
        class="fd-slider [extra classes]">
   <span class="fd-slider-inner" />
   <span class="fd-slider-bar" />
   <button id="fd-slider-handle-[form element id]" 
               class="fd-slider-handle" 
               type="button" 
               role="slider" 
               aria-valuemin="[minimum value]" 
               aria-valuemax="[maximum value]" 
               aria-labelledby="[form element's label]" 
               aria-describedby="fd_slider_describedby" 
               aria-valuenow="[current value]" 
               aria-valuetext="[current textual value]"> 
   </button>
 </div>
  
  

Note: The “aria-describedby” relationship is only set if the document contains an element with an id of “fd_slider_describedby”. When using a select list as the associated form element, the “aria-valuetext” is set to the currently selected option’s textual value and the “aria-valuenow” to the same option’s value.

Keyboard accessibility and ARIA roles & states

Once a slider has focus, the arrow keys can be used to move the drag handle, the Home button to move the slider to it’s minimum value and the End button to move the slider to it’s maximum value. Pressing the CTRL key and an arrow key will move the slider handle by increment defined within the fd_maxinc class (or by two times the normal increment should no fd_maxinc be defined).

Each slider is given the WAI-ARIA role of slider and it’s associated states valuemax, valuemin, valuetext (for sliders created from selectlists) and valuenow.

Should an element with an id of fd_slider_describedby exist within the DOM, this is used to set the ARIA describedby relationship.

Additionally, should the slider’s associated form element itself have an associated label, this label is used to set the ARIA labelledby relationship.

Backwards compatibility

By default, the slider handle is created from a BUTTON element which makes it keyboard accessible across all current browsers (as BUTTON elements are “focusable” and automatically become part of the document’s tab order by default).

If you wish to use a pure ARAI solution i.e. one that entails programmatically setting a tabIndex on a non “focusable” element, give the slider’s associated form element the class fd_full_aria; this will instruct the script to construct the slider handle from a SPAN, not BUTTON element and programmatically place the SPAN into the document’s tab order. The latest versions of all current A-grade browsers support programmatically setting the tabIndex on non-focusable elements and so this option has a more widespread reach than was possible even six months ago.

The available slider A.P.I methods

The following methods have been made available from the fdSliderController Object:

Method	Description
create( [form element] )	When a form element is passed into the function, the script will recreate the slider for the element in question. Should no form element be passed in, the script will rescan the entire document and recreate all of the required sliders.
destroyAll	When called, this method will destroy all current sliders
destroySlider( id )	This method will destroy the slider associated with the form element id that was passed as an argument
increment( elemID, numberOfSteps )	This method increments the slider associated with the input whose id attribute is elemID by the number of steps provided by the second argument. Negative increments can be defined.
disableMouseWheel( )	This method will disable mouseWheel support for all sliders on the current page.
removeOnLoadEvent( )	This method will remove the onload event for the sliderController meaning you have to manually call the init method. Useful if you use a “onDomContentLoaded” function etc.
addEvent(elem, eventType, function), removeEvent(elem, eventType, function) and stopEvent(event)	Common event management functions

For example, to use the create method, you would call fdSlidercontroller.create().

Bugs and annoyances

Opera

Opera fires the blur event onmouseup which means I have to programmatically reset the focus, this causes a slight “flicker” as the styles are swapped (and I hope assistive technologies are savvy enough to report this focus event to the user).

Safari

Safari only calls the focus event handler on keyboard, not mouse events, which again means I have to programatically set the focus.

Internet Explorer

The demo uses png images for the slider drag-handles (originally located at schillmania) and will therefore only display in Internet Explorer (5.5 & 6) by using additional and proprietary CSS filter behaviours (which are passed using conditional comments within the demo). All other modern browsers display the png images as intended.

Future development

Future versions of the slider will:

• Integrate an optional system for rendering the slider scale
• Give you an easier method for globally disabling mouseWheel events
• Use the page up and page down keys as advised in the AOL authored DHTML Style Guide
• Will use a className (and not a JavaScript initiated “display:none“) to hide the associated form element – enabling you to choose the method appropriate for your project
• Ship with different themes that (where possible) scale to fit liquid layouts

The License

The script is released under a creative commons Attribution-Share Alike 3.0 Unported license. Should you use the script within a commercial context please think about clicking the payPal donate button – it’s certainly not an obligation but it would most certainly put a smile on my face. If you need a dual license, just ask me politely.

References

If you’ve read this far, you may also be interested in the following:

• The WAI-ARIA roadmap
• A List Apart’s primer on Accessible Web 2.0 Applications with WAI-ARIA
• Juicy Studio’s WAI-ARIA in HTML article and slider control demo
• schillmania, where the slider styles and png images were originally located
• Mouse wheel programming in JavaScript, general information about handling mouse wheel-generated events in JavaScript programming language
• The webAIM article “CSS in Action: Invisible Content Just for Screen Reader Users“

Demo, Downloads and Updates

Tested in Internet Explorer 6, Opera 9.5, Safari 3 (Win & Mac) and Firefox 3 (Win).

View the basic slider demo (that demo’s the three different handle animation effects), the tooltip demo (that shows you how you might create a tooltip to display the slider’s current value), the colour picker demo (that uses three sliders to create a colour picker), the alternative styling demo (that styles the sliders differently), the vertical slider demo (that demos a vertical slider and a return value set to have a precision of two decimal places), the JS creation demo (that shows you how to create sliders using Javascript and no classNames) or the increment demo (that shows how to extend the slider functionality using the increment A.P.I. method). Download a .zip of the demo source, download an 18k YUI minified version of the script or have a look at the uncompressed javascript code.

08/06/2009 (v2.5):

• A better .zip (no tarbomb this time)
• Added an updateSlider method
• Added a createSlider method
• Added the jsInitiated demo
• Fixed a CSS problem in the vertical demo
• Rounded the slider corners for those that can by using border-radius

17/10/2008 (v2.4):

• Changed the parseCallbacks function to use Function.apply. Code graciously sent by Artem B.
• Added the Ins and Del keyboard events

13/10/2008 (v2.3):

• Moved the slider into the controller’s scope
• Added the Page up and Page down keyboard events
• Inputs are now “hidden” by being given the class “fd_hide_slider_input”

23/09/2008 (v2.2):

• Fixed a bug in the tooltip demo
• Fixed a bug within the key event code
• Added a minified version to the download

07/08/2008 (v2.1):

• Added the disable mouseWheel functionality

01/08/2008 (v2.0):

• Creation

  
function addBespokeHandleEvents() {
  var handle = document.getElementById("fd-slider-handle-selectTest1");
  // If something has gone wrong then bail out!
  if(!handle) { return; };
  fdSliderController.addEvent(handle, “mousedown”,   myMouseDownFunction);
};

function myMouseUpFunction(e) {
  fdSliderController.removeEvent(document, "mouseup",   myMouseUpFunction);
  alert("handle pixel position is "  + document.getElementById(“fd-slider-handle-selectTest1”).style.left);
};

function myMouseDownFunction(e) {
   fdSliderController.addEvent(document, "mouseup",   myMouseUpFunction);
};