jQuery UI Sliders and Touch Accessibility

jQuery UI is now a main stream user interface toolkit. It works most everywhere, but touch devices currently struggle with some of it’s widgets, including the Slider. The problem is touch and drag events can get mixed up between the web page and the browser. In other words when does a swipe indicate to scroll the page or slider adjustment. Currently after a couple searches there are a couple attempts to fix this without much effort beyond including a javascript file:

Essentially these two plugins listen for touch events and pass the event on to jQuery UI so they can be processed. But still these can be cumbersome in my findings. So I’ve come up with a quick solution.

When we use a slider, and touch events are available we know it is a touch device, so we can insert a couple jQuery UI buttons to increment and decrement the sliders.

Adding this ability can be as simple as one more method chained after your slider:

$('#slider').slider().sliderAccess();

On top of that if you want it to always show, even when it’s not a touch enabled device, you can specify that as well:

It should also be noted that for this plugin to work you will need to include the button widget in your jQueryUI build. From there we handle the rest. When a button is clicked the change event will be fired through the slider, however the slide event will not. This plugin makes no attempt to stop the click event on the buttons, so if you need to catch these events since there is not slide event you may do it the natural way.

One final note for this plugin. It is small, I will likely not be making many updates to it. If you need to tweak something feel free, and if you like post your changes here. I may integrate it if I see the need. The downfall and updside is as time passes jQueryUI will likely improve their support, so this plugin will become irrelevant. Enjoy!

I’ve been attempting to make this work with your timepicker addon and have encountered a few issues with the timepicker addon that I wanted to bring up. Do with it what you will.

In the timepicker addon, you calculate hourMax, minMax, secMax, and millisecMax in a couple of places and use these values when you set the sliders. The problem is you are calling .toFixed(n) on the calculations, which makes the variables into string objects instead of numbers. Doesn’t make any sense to me either but it does.

This in effect makes the “max” value of the slider be “59” instead of 59. Under normal operations this isn’t causing a problem because of how our friend JavaScript handles normal operators. 58 < "59" will be true just as much as 58 “50” so it always returns.

The root fix for all of this is to make sure your hourMax, minMax, etc. stay numbers. In the timepicker addon, wrap the calculations in parseFloat(). Two places – around line 344, and again around 735.

The other problem is that the buttons don’t evoke the slide() function so you need to add a change() function to your timepicker sliders to intercept it. You set these sliders up around line 468. Adding this is sufficient:

change: function(event, ui) { tp_inst._onTimeChange(); },

You can then add your .sliderAccess() to the end of these same declarations and the buttons will behave as intended.

However.. the styling of the buttons cause visual issues inside the timepicker – at least in IE9 and FF8. I haven’t had time to look at the markup and figure out how to correct it yet. If I do, I’ll post back.

No edit comment feature on here, eh. A paragraph got cut out of there for some reason, and jumbled up.

This mess:

“This in effect makes the “max” value of the slider be “59″ instead of 59. Under normal operations this isn’t causing a problem because of how our friend JavaScript handles normal operators. 58 < "59" will be true just as much as 58 “50″ so it always returns."

was written as:

This in effect makes the “max” value of the slider be “59″ instead of 59. Under normal operations this isn’t causing a problem because of how our friend JavaScript handles normal operators. 58 < "59" will be true just as much as 58 “50” so it always returns.

Oh bloody hell.. the comment was interpreting my use of a lesser than and further along a greater than as one big tag. Sorry for the spam. Replacing the lesserthan sign with an !lt!. Also replacing quotes with apostrophes. This woulda been easier by email.

Here:

This in effect makes the max value of the slider be ’59’ instead of 59. Under normal operations this isn’t causing a problem because of how our friend JavaScript handles normal operators. 58 !lt! ’59’ will be true just as much as 58 !lt! 59.

The problem comes in with the math used by sliderAccess to calculate new values. If the slider isn’t maxed out, you’re fine. The current value is a number. Once you hit max on the slider however, the current value becomes a string.

If the step is 10, for example, the new value will become ’59-10′ or ’59+10′. When it comes to the evaluation, ’59-10′ !gt! ’59’ so it always returns.

Thank you for this post! I recently experienced the same problem when I tried implementing jquery UI sliders and have them work in iPads. I did end up finding this jquery mobile slider which helped me incredibly.

I am trying to use the datetime picker with bootstrap. We moved our app to use bootstrap which is bundled with jquery (v 1.7.1). I am having trouble getting the date time picker to work with it. We are doing as in the bootstrap example and loading the jquery.js file at the end of the page (In fact it seems that some functionality doesn’t work (eg menu drop down) if loaded in . I have tried a few things eg loading datetimepicker after jquery but no luck.

!! This is quite urgent please let me know if there is a work around !!

Sounds like your libraries aren’t loaded before you try to use them, even with your drop down. If your scripts are loaded at the end of the page then any logic requiring those plugins still needs to come after them. Be sure to use

2. Also is how to get the time to display in local time on the date time picker So intead of showing 8:35pm +10:00 have it show 6:35am AEST because when I demo’d the app to a client it seemed painful to have them calculate off GST when the website is only for Australia. Is it possible to display local time with timezone?

Please disregard the first question about touch controls. It works now .. I guess something was cached.

I still need to figure out how to display local time though.

Comments are closed.

You found me, I'm Trent. I develop practical things for the web, like javascript libraries and plugins. I also love databases so don't talk trash about SQL. Beyond that I post about useful web development stuff here on my blog.

Feel free to subscribe to learn about project updates, tutorials, and more!