javascript - Input type range not working on mobile devices when rotated -

i'm sitting on interesting problem:

i have input type range, rotated 270deg using css transform property.

on desktop browsers works fine on mobile devices, when try use range fader, screen scrolling instead.

my first attempt fix using inputs focus , blur events disable scrolling function of page, these events don't seem triggered on mobile devices.

has dealt problem?

i made plunkr reproduce problem:

if not on mobile browser, enable device browser in top left of chrome inspector

thanks

edit: -webkit-appearance: slider-vertical; css property not option me because need css styles applied fader: <input type="range"> style not applies thumb when vertical

edit:

found solution works me, thepio proposed:

var element = document.getelementbyid('range-input'); element.addeventlistener('touchmove', function(event){     //event.preventdefault(); });

interestingly works without event.preventdefault() line

why not use vertical slider instead?

input[type=range] {    -webkit-appearance: slider-vertical;    width: 5px;    height: 200px;  }

<input type="range" orient="vertical" id="range-input">

MOno