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

Question

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);
  }
});

possible duplicate of jQuery UI sliders on touch devices

Foreever
– Foreever

2014-01-24 09:42:19 +00:00
Commented Jan 24, 2014 at 9:42 — Foreever
– Foreever, Commented Jan 24, 2014 at 9:42

Syfer · Accepted Answer · 2023-08-21 03:26:24Z

310

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.

edited Aug 21, 2023 at 3:26

Syfer

4,5593 gold badges23 silver badges39 bronze badges

answered Dec 10, 2012 at 20:34

username

4,3081 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ronenfe Over a year ago

Yes, it also fixed a bug with the slider not choosing the right values.

Stef Hej Over a year ago

works like a charme with rails5 android and ios devices

Rahul J. Rane Over a year ago

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?

Mohammad Salehi Over a year ago

This package last update was in 2014, so far it has been 10 years but it still works!

Siful I · Accepted Answer · 2017-08-14 14:01:04Z

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.

answered Aug 14, 2017 at 14:01

Siful I

1,9303 gold badges22 silver badges31 bronze badges

Comments

Mahdi Akrami · Accepted Answer · 2021-07-11 04:42:40Z

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 );

answered Jul 11, 2021 at 4:42

Mahdi Akrami

6771 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related