Slider form controler on iPad and Touch screens

JavaScript
1

I’ve been playing with Kevin Yank/Cameron Adams slider control from Simply Javascript (pp248): http://onsitenow.co.uk/stuff/annuitycalculator/

Has anyone got any advice on trying to get it to function on an iPad/touch screen.

I’ve tried adding event listeners to ontouchstart, ontouchmove, ontouchend

And I’ve tried to make my slider clickable by adding: slider.onclick = function(){void(0);};

But I can’t get it to work on touch screens.

Is it possible, any advice?

Thanks
Mike

2

Hi there,

If you want to do this yourself, then this article shows you how to implement a range slider from scratch on a touch device: http://css3wizardry.com/2010/09/14/range-slider-with-css-and-javascript/

Otherwise, if you don’t mind using a library, jQuery mobile is the way to go: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-slider.html

Let us know how you get on.

3

Hi Pullo,

Thanks, those were the pointers I was looking for :slight_smile:

I was hoping to avoid using a framework, as mobile devices may be working on smaller bandwidths, so my preference would be to do it with native javascript.

I’ll try the first tutorial first, though I notice it doesn’t give a working example, just images of a slider, which is strange.

If I can’t get to grips with that I’ll have a look at jquerymobile.

Thanks for your suggestions.

Mike

4

You may then want to consider a tiny library that’s dedicated only to touch gestures on such devices, called Hammer.
At the very least, it will also make it easier for you to carve out just the few parts of that library that you know you will have no use for, such as certain types of multi-touch gestures, if you want to cut down even further on space.