Vertical slider can't be dragged to move on mobile

Issue

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.

body {
  text-align: center;
}

#slider-container {
  transform: rotate(-90deg);
  margin-top: 60px;
}

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

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...

Solution

I had the same issue but finally, after hours and hours of searching, I finally found a blog post that described a solution that worked for me. The blog post can be found at https://dev.to/konnorrogers/creating-a-vertical-slider-using-input-typerange-1pen and the solution it discusses is simply to rotate the <input type="range"> itself, instead of the parent container.

body {
  text-align: center;
}

input {
  transform: rotate(270deg) translateX(-100px);
  transform-origin: top left;
  width: 100px;
}

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

Answered By - Mike Dilorenzo