title: Input type range not working on mobile devices when rotated
body: <p>i'm currently sitting on an interesting problem:</p>
  
  <p>I have a input type range, rotated by 270deg using the css transform property.</p>
  
  <p>On desktop browsers this works fine but on mobile devices, when i try to use the range fader, the screen is scrolling instead. </p>
  
  <p>My first attempt to fix this was using the inputs focus and blur events to disable the scrolling function of the page, but these events don't seem to be triggered on mobile devices. </p>
  
  <p>Has anyone already dealt with this problem?</p>
  
  <p>I made a plunkr to reproduce the problem:</p>
  
  <p><a href="https://embed.plnkr.co/FrdJZqeB8zqQxjN7zS8u/" rel="nofollow noreferrer">https://embed.plnkr.co/FrdJZqeB8zqQxjN7zS8u/</a></p>
  
  <p>If you are not on a mobile browser, just enable the device browser in the top left of the chrome inspector</p>
  
  <p>Thanks</p>
  
  <p>Edit: The  <code>-webkit-appearance: slider-vertical;</code> css property is not an option for me because i need css styles applied to my fader: <a href="https://stackoverflow.com/questions/32312956/input-type-range-style-not-applies-to-thumb-when-it-is-vertical">&lt;input type=&quot;range&quot;&gt; style not applies to thumb when it is vertical</a></p>
  
  <p>Edit: </p>
  
  <p>Found a solution that works for me, as thepio proposed:</p>
  
  <pre><code>var element = document.getElementById('range-input');
  element.addEventListener('touchmove', function(event){
      //event.preventDefault();
  });
  </code></pre>
  
  <p>Interestingly this works only without the event.preventDefault() line</p>