jQuery UI slider Touch & Drag/Drop support on Mobile devices
jquery, jquery-ui, jquery-ui-slider, touch
Solution
jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.
Just add the script after jQuery ui:
<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>
<script src="jquery.ui.touch-punch.min.js"></script>
You can also use cdnjs:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
Note: Better give this repo a star on Github.
Problem
I have already styled and implemented jQuery UI slider into a project. Though it's responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I'd like to avoid swapping to jQuery mobile UI, which supports touching and dragging, since we already extensively use jQuery (non-mobile) UI. The functionality we want: Here What we are using: Here On a desktop you can't tell the difference. On a mobile device it is apparent. Anyone know how to add this support to jquery UI? ``` $("#videographers").slider({ value: 2, min: 1, max: 3, step: 1, slide: function(event, ui) { return calcTotal(ui.value); } }); ```