How do I make a JQuery Slider-like feature on iPhone/Android web app?

Question

In the iPhone or Android, if you have a JQuery Slider, it doesn\'t quite work (touchscreen will move the screen instead of drag the slider.)

Answer 1

You can use this library http://touchpunch.furf.com/ This provides touch events for all the jquery ui elements.

Answer 2

Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.

Answer 3

You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.

Answer 4

I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!

Link to source

Answer 5

I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.

Answer 6

You may need to write this from scratch. Luckily, @ppk has coded up an example of drag and drop for iPhone.