Vertical slider can’t be dragged to move on mobile

My first question ever so apologies in advance for anything incorrect or missing, I’m a total beginner.

I’m working on a mini JS/html app that includes a vertical slider (via transform:rotate) and on desktop, everything works fine, but on mobile (android, or chrome via device mode in developer tools) the thumb can’t be dragged.

It’s still possible to change the slider value by touching the slider track, but no longer possible to move the thumb by dragging. How can I get that working?

Here’s minimal code to show the problem. The app is vanilla JS, ideally a solution would also be vanilla if JS is needed.

<div id="slider-container">
  <input type="range" min="0" max="100" value="10">
</div>

body {
    text-align: center;
  }
  
  #slider-container {
        transform: rotate(-90deg)
  }

At first I thought it was because vertical dragging was triggering scroll behaviour, but it still happens even with overflow:hidden.

It must be something simple but I’m stumped after much googling…