Cross-browser vertical input range slider with custom styling

Question

Slider CSS works in Firefox as desired

Here's a sample, which is giving the desired results if viewed with Firefox, but not if viewed with Chrome.

The key problem is that I seem to need to have this for Chrome: -webkit-appearance: slider-vertical; - try removing it in the sample and view it in Chrome and the input range becomes horizontal rather than vertical
But then as a result I cannot hide the native visuals that I have replaced with the custom styling, with -webkit-appearance: none;
I cannot hide them, because it is the same property i.e. -webkit-appearance cannot be both slider-vertical and none in our non-quantum CSS (see under the [type='range'] selector)

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

As suggested in this answer, use transform to make the slider vertical, so you can set -webkit-appearance to none.

edited May 23 '17 at 11:46

Community

answered Apr 12 '17 at 09:55

cytsunny

Thanks, this was the crux – Cel Apr 13 '17 at 12:09
While there was a need for a lot of changes as the transform messed up the sizing - in the end I had to resort to javascript to position the rotated vertical slider http://codepen.io/KristjanLaane/pen/qmBQqe – Cel Apr 13 '17 at 12:11