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

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

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

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

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

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

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.

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.