iPad vertical input-slider

Question

I'm using jQuery UI to create a vertical input-range slider (this style to be exact).
I would rather use a more lightweight framework like Zepto, or of course native JS to create this slider.

My specific use-case is for iPad (iOS 4.3+) only, so only webkit-support is required. CSS3 styling of <input type="range" /> is not an option because it cannot be styled in vertical orientation, and rotate(90deg) doesn't behave correctly on iOS. Also, iOS 4.3 does not support it at all.

Can anyone point me to a better solution?

Some answers here: http://stackoverflow.com/questions/5001464/google-chrome-vertical-input-type-range - or- http://jsfiddle.net/ArondeParon/SPjsf/15/ — Scriptor, Apr 26 '12 at 22:50
Not relevant to my question, like I said: "...cannot be styled in vertical orientation". — thv20, Apr 30 '12 at 16:08

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

This may be what you're after:

https://stackoverflow.com/a/8696975/1170982

I'm not sure how the rotate3d transform doesn't behave correctly in iOS - never encountered any issues myself, but you could also apply the 'vertical-slider' value to a transform:

-webkit-appearance: slider-vertical;

Here's a wee preview:

http://jsfiddle.net/pSfSx/

edited May 23 '17 at 12:12

Community

1
1

answered Apr 26 '12 at 22:51

blend

640
4
6

Ah, someone already answered it at the end of @ErikdR 's link. – blend Apr 26 '12 at 22:52

iPad vertical input-slider

1 Answers1