vertical range slider for mobile using webkit

Question

I've almost completed my project but just have this last thing which I've been putting off for awhile.

I currently have several sliders (all are horizontal) - they all work. I'm currently using the Mobile Range Slider library which can be found here: https://github.com/ubilabs/mobile-range-slider/blob/master/README.md

Does anyone know how I could extend this or maybe some CSS3 trickery to make it into a vertical slider?

I thought I could get lucky by using transform and flipping it, however the sliding action doesn't track (it only moves slightly, and when it does move it doesn't necessarily track the slide action i.e. sliding up may move the slider up but can also move it down - if that makes sense?)

The CSS I tried was:

-webkit-transform: rotate(90deg);

I'm currently only focusing on iPhone and Android - any other mobile platform will be a bonus but isn't required at this stage.

Any help or pointers will be greatly appreciated :)

Answer 1

Try using -webkit for chrome and safari:

http://css-infos.net/property/-webkit-appearance