From 849441f23a3a960e3765916c592595d6a603046a Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Sun, 28 Oct 2018 15:52:41 +0000
Subject: [PATCH] Range bubble now behaves properly on mobile

---
 src/custom-els/RangeInput/index.ts   | 12 ++++++++++++
 src/custom-els/RangeInput/styles.css |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/custom-els/RangeInput/index.ts b/src/custom-els/RangeInput/index.ts
index 1195fa79..2d11bbc7 100644
--- a/src/custom-els/RangeInput/index.ts
+++ b/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);
     }
diff --git a/src/custom-els/RangeInput/styles.css b/src/custom-els/RangeInput/styles.css
index f48483b3..21ca4767 100644
--- a/src/custom-els/RangeInput/styles.css
+++ b/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);
 }