Html range input active state: How can I make it work on mobile in Stencil?

I'm building a web component in Stencil. I've trimmed it down to the bare minimum to demonstrate my issue.

import { Component, h } from "@stencil/core";

@Component({
  tag: "custom-slider",
  styleUrl: "custom-slider.scss",
  shadow: true,
})
export class CustomSlider {
  render() {
    return (
      <input type="range" min="0" max="100" step="1" />
    );
  }
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  margin-top: 100px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 36px;
  width: 36px;
  background: #555;
  margin-top: -12px;
}

input[type="range"]:active::-webkit-slider-thumb {
  background: blue;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  background: #ccc;
}

input[type="range"]:active::-webkit-slider-runnable-track {
  background: #ddd;
}

When dragging the thumb I'm expecting it to be blue, but on mobile it isn't. Why?

It works fine on desktop, and the same code works in this CodePen https://codepen.io/tobbe_lundberg/pen/zYzWoKv for both desktop and mobile.

I'm testing using the device emulator on Chrome.

How can I make the active state work on mobile as well for my stenciljs web component?