Range bubble now behaves properly on mobile

src/custom-els/RangeInput/index.ts

@@ -1,5 +1,6 @@
 import { bind } from '../../lib/initial-util';
 import * as style from './styles.css';
+import { PointerTracker, Pointer } from '../../lib/PointerTracker';
 
 const RETARGETED_EVENTS = ['focus', 'blur'];
 const UPDATE_EVENTS = ['input', 'change'];
@@ -26,6 +27,17 @@ class RangeInputElement extends HTMLElement {
     this._input.type = 'range';
     this._input.className = style.input;
 
+    const tracker = new PointerTracker(this._input, {
+      start: (): boolean => {
+        if (tracker.currentPointers.length !== 0) return false;
+        this._input.classList.add(style.touchActive);
+        return true;
+      },
+      end: () => {
+        this._input.classList.remove(style.touchActive);
+      },
+    });
+
     for (const event of RETARGETED_EVENTS) {
       this._input.addEventListener(event, this._retargetEvent, true);
     }

src/custom-els/RangeInput/styles.css

@@ -84,11 +84,11 @@ range-input::before {
   overflow: hidden;
 }
 
-.input:active + .thumb-wrapper .value-display {
+.touch-active + .thumb-wrapper .value-display {
   opacity: 1;
   transform: scale(1);
 }
 
-.input:active + .thumb-wrapper .thumb {
+.touch-active + .thumb-wrapper .thumb {
   box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 }