title: Input type=range sliding behavior broken in Chrome on Android
body: <p><strong><em>Update</em></strong></p>
  
  <p>I'm fairly certain this is a bug in the latest Android Chrome browser. I'm still trying to pin down what causes it, but the behavior I'm seeing is:</p>
  
  <ul>
  <li>Touch drag events on things like sliders work fine, until;</li>
  <li>Something else loads in the same browser view/tab (still trying to nail down what this "something" is).</li>
  <li>Touch drag events now fail in the same browser view/tab, even if the URL is manually changed to load a previously working slider on a different page.</li>
  <li>Opening a new browser view/tab to load the slider restores the touch functionality, but the old view is permanently broken.</li>
  </ul>
  
  <p>The touch up/down events still work, it's the drag that's broken.</p>
  
  <p><em>More details and workaround:</em></p>
  
  <p>I'm working in an SPA. I dynamically add elements to the page as one "view", then swap those elements out for a second "view" that contains the slider. It appears that the "something" noted above is due to adding JS touch handler events on the second view. <em>However,</em> if I add touch handlers to the first dynamically created view, <em>even on an otherwise empty element,</em> my slider on the second view works fine and there is no "permanent" destruction of touch drag events.</p>
  
  <p>I'll try to whip up a minimal reproduce case to send to the Chrome team as a bug report.</p>
  
  <p><strong><em>Original Post</em></strong></p>
  
  <p>I have a custom SVG control that acts like an <code>&lt;input type="range"&gt;</code> slider which recently stopped responding to touch/drag events on Android Chrome. After digging in for some time, I was able to replicate the problem with a normal input slider as well. I <em>suspect</em> the problem is a bug in my version of Chrome (I have made no changes and it only started to fail recently), but I'm trying to work around it; my suspicion is that browser drag events are no longer being fully passed down to my controls, but I'm not sure how to force that to happen.</p>
  
  <p>Here's a minimal reproduce case that fails to respond for me when loaded in the regular Android Chrome browser:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input type="range" min="0" max="50"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, I've found other <a href="https://html5tutorial.info/html5-range.php" rel="nofollow noreferrer">examples</a> that seem to work correctly, indicating that this isn't purely a bug with this version of Chrome (75.0.3770.67 running on Android 9). Is there a workaround I can do to get this responding again, as it seems to work in <em>some</em> cases? (Preferably, a solution I may be able to transfer to my SVG control, but at this point I'll use a basic slider if it can restore my broken functionality.)</p>
  
  <p>This doesn't fail on my desktop browsers, nor does it fail on iOS. It works on an older Android device (Chrome version 74.0.3729.136 running on Android 6). On the failing device, it worked up until "recently" (I only discovered it was broken at all when I received a customer support email), probably after Chrome updated in the background.</p>