jQuery UI sliders on touch devices

Question

I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.

The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?

I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.

Thanks!

UPDATE: I found this "patch" on the jQuery UI website

http://bugs.jqueryui.com/ticket/4143

that says it facilitates slider on iPhone, but now for another stupid question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?

Answer 1

This library seems to offer what you're looking for:

https://github.com/furf/jquery-ui-touch-punch#readme

It also has some example use code (simply add the plugin):

<script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> <script src="jquery.ui.touch-punch.min.js"></script> <script>   $('#widget').draggable(); </script> 

Answer 2

Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)

The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:

-ms-touch-action: none; touch-action: none; 

Hope this helps