118

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);
  }
});
Seth
  • 10,198
  • 10
  • 45
  • 68
  • 2
    possible duplicate of [jQuery UI sliders on touch devices](http://stackoverflow.com/questions/6360249/jquery-ui-sliders-on-touch-devices) – Foreever Jan 24 '14 at 09:42

3 Answers3

305

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.

Syfer
  • 4,262
  • 3
  • 20
  • 37
username
  • 4,258
  • 1
  • 16
  • 26
  • Yes, it also fixed a bug with the slider not choosing the right values. – Ronen Festinger Nov 01 '16 at 03:40
  • 1
    works like a charme with rails5 android and ios devices – Stef Hej Jan 16 '17 at 19:26
  • great.. it works smoothly.. :) One observation is that in iOS devices when we slide the slider it's not sliding when we touched it but when we release the touch from it then it slides at that point. any idea why this happens? do you have any solution for this? – Rahul J. Rane Apr 13 '20 at 11:13
6

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.

Siful Islam
  • 1,906
  • 3
  • 21
  • 31
1

if you are in Wordpress you can use this code in functions.php:

add_action( 'wp_head', function () {

    // jquery.ui.touch-punch
    wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );

}, 999 );
Mahdi Akrami
  • 466
  • 1
  • 4
  • 12