How to style vertically displayed range input so that also works on mobile

Question

I need a vertical range input. There are two ways to rotate it (How to display a range input slider vertically):

• -webkit-appearance: slider-vertical;
• transform

Both do the job in rotating the input itself - but only on desktop. There are two issues though:

1. The transform-rotated version does not work on mobile. You can't drag the thumb, as the whole page will be scrolled instead. The appearance-modified works.
2. But I do need to style it as well (like here: https://codepen.io/zorgoz/pen/KKJoqXX). And that relies on -webkit-appearance: none;, which excludes slider-vertical to be applied at the same time obviously.

Can I have both?

Answer 1

I started to look from another direction: can I stop the "page drag" instead on that specific element? It turned out that I can. Adding touch-action: none; does the job.