jQuery UI sliders on touch devices

Question

I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.

The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?

I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.

UPDATE: I found this "patch" on the jQuery UI website

http://bugs.jqueryui.com/ticket/4143

that says it facilitates slider on iPhone, but now for another question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?

Haroldharolda

Answer 1

This library seems to offer what you're looking for:

https://github.com/furf/jquery-ui-touch-punch#readme

It also has some example use code (simply add the plugin):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

Cavefish

Note to the masses: attach it to the slider handle, not the whole thing. (For the jQuery slider that would be $('.ui-slider-handle').draggable(); – Excommunicative

Now I can move the slider-handle all over the page!! This is ridiculous. – Chant

I can move the handle all over the page in Firefox Mac. I am wondering if we need to place a conditional if(ipad|iphone) ... then draggable(). – Jacklin

Scratch my original comment above. This works just by including this plug-in in the HEAD. Add the <script src> by do not add $(selector).draggable(); for making the slider handles work. – Jacklin

@Cavefish it doesn't work for me. I have placed plugin just after //ajax.googleapis.com/ajax/libsjquery/1.7.1/jquery.min.js library – Flint

this really does make you drag the slider all over the page lol – Colman

@Cavefish @Haroldharolda Worked for me. I had to let a range slider used by mobile phones. I included the library just after jquery-ui library and before the script calling the .slider() function. No further row of code had to be written. – Wold

You only need to include the touch punch script and that's it. Like @JoeHyde said in his second comment, there is no need to call .draggable() on any element. Just include the script and it should work. – Niel

Answer 2

Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)

The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

Hope this helps

Calcimine

not working for me ? any example link please @Calcimine – Crossarm

uhh but this ruins the functioning of the actual touch punch – Colman

This fixed my issue. Thanks! – Strainer

Nor working form me on a Dell laptop with a touchscreen jsfiddle.net/jhtcqbqo – Rudolfrudolfo

I'm using a bog-standard HTML slider, which was very laggy and choppy when viewed on an Android phone. Adding touch-action: none; instantly removed this lag. So this is both a thank you, and a note to anyone having the same issue in the future: Choppy or laggy HTML sliders with custom CSS may benefit from this attribute. – Hocus

Answer 3

As @dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.

Misprint

This got it working for me. The only issue now is that the background region (when range: "min" is set) is not obeying the slider position. – Rancourt

Answer 4

I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.

Just use noUiSlider.

It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.

Groceryman