Question

I had a site using YUI 3 sliders that was working fine for ages. About two weeks ago I was showing a friend my site on my phone, and it worked great.

Then, about a week ago, I was showing it to another friend using my phone again, and the thumbs on the slider would not move. Something has changed and they no longer respond to touch events on my phone.

On a computer, when using a mouse, the thumb is draggable. Everything works perfectly.

It’s only on devices where the interface requires touch that I can’t move the thumbs. I’ve tested on two Android devices, an iPhone, and an iPad.

The javascript loads, as it renders the slider. I can click on the rail of the slider and the thumb jumps to that position, so it’s not like touch events are completely gone.

However, as far as I can tell, it is not possible to touch the thumb and drag it on a mobile device with a touch screen.

I have tried for a week to figure out what I might have changed, but I just can’t solve it.

Can someone look at this page and tell me why touch events aren’t working?

Note that I’ve tried to make this a version that is stripped down to provide only the minimum required to demonstrate the problem, but there might be some odd snippets of irrelevant code here or there.

Any advice would be much appreciated. Thank you for your time and assistance.

Please note: The example page linked to in this question will very likely be removed after a period of time. Thanks for your understanding.

Answer 1

It seems like you need to specify use("slider" instead of use("*". Here’s a working (and greatly simplified) demo.