jQuery UI touch events

As more and more websites go responsive, the widgets with touch events are a must. jQuery UI, unfortunately, doesn’t support touch events for their widgets.

After a struggle with a jQuery UI slider to make it work on an iPad, I’ve found an awesome js library that adds touch events to the jQuery UI.

jQuery UI Touch Punch is a hack that enables the touch events on sites using jQuery UI.

How to use

1. You need to include the jQuery and jQuery UI on your page

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2. Include the Touch Punch js after jQuery UI and before its first use.

<script src="/js/jquery.ui.touch-punch.min.js"></script>

3. Use jQuery UI as normal

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

Now enjoy the touch events on your jQuery UI widgets!

Demo & Download