Add UI-Slider Accessibility to Timepicker

You knew it was coming! An example of integrating my jQuery UI Slider Touch Accessibility addon to the jQuery Timepicker Addon. Before getting started I must note that this currently will only work with the latest Timepicker (version 0.9.8+). I had to clean up the markup generated in timepicker to make this easier, as well as other adjustments (Thanks to Dana over on the sliderAccess post).

First, start off with a normal timepicker. This means include all the scripts and initiate (jquery, ui, timepicker, and sliderAccess plugin):


<div id="datepicker"></div>

The JS:


Ok, with the newest timepicker addon there are two new options, addSliderAccess (true/false), and sliderAccessArgs (object of sliderAccess options). Now we can attach our accessibility addon for touch devices:

    addSliderAccess: true, 
    sliderAccessArgs: { touchonly: false }

These two new options are solely for sliderAccess, and will attach it to any visible slider. I passed in the touchonly option just so its immediately visible to you that it is installed. In production you may want to either set to true or omit passing this option. Then it will only be visible when a touch device is present.

Wow! Thats it! Check with the Slider Accessibility docs for more options. I have also added this example to the timepicker documentation. Enjoy!