jQuery UI slider Touch & Drag/Drop support on Mobile devices

Question

I have already styled and implemented jQuery UI slider into a project. While it is mobile and scales properly, it does not allow tap and drag. Instead you have to touch where you want the slider to go. jQuery mobile UI supports this, but I have time invested into what is already there.

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?

$("#cameraSlider").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    cameramen = ui.value;
    return calcTotal();
  }
});

Thanks, Seth

Answer 1

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.

Answer 2

You can just link this js.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

thanks.