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>