Cross-browser vertical input range slider with custom styling

Question

Slider CSS works in Firefox as desired

Does not work in Chrome

Problem elaboration

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)

Answer 1

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