1

i'm currently sitting on an interesting problem:

I have a input type range, rotated by 270deg using the css transform property.

On desktop browsers this works fine but on mobile devices, when i try to use the range fader, the screen is scrolling instead.

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.

Has anyone already dealt with this problem?

I made a plunkr to reproduce the problem:

https://embed.plnkr.co/FrdJZqeB8zqQxjN7zS8u/

If you are not on a mobile browser, just enable the device browser in the top left of the chrome inspector

Thanks

Edit: The -webkit-appearance: slider-vertical; css property is not an option for me because i need css styles applied to my fader: <input type="range"> style not applies to thumb when it is vertical

Edit:

Found a solution that works for me, as thepio proposed:

var element = document.getElementById('range-input');
element.addEventListener('touchmove', function(event){
    //event.preventDefault();
});

Interestingly this works only without the event.preventDefault() line

Community
  • 1
  • 1
Raumfisch
  • 51
  • 1
  • 5
  • Just attach an event listener to the input which prevents default behavior when it's an touchmove event. – thepio Apr 07 '17 at 08:10

1 Answers1

0

Why not use a vertical slider instead?

input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 5px;
  height: 200px;
}
<input type="range" orient="vertical" id="range-input">
Arg0n
  • 8,283
  • 2
  • 21
  • 38
  • Yes i tried this as well, unfortunately it is not possible to style the slider properly with the slider-vertical setting: http://stackoverflow.com/questions/32312956/input-type-range-style-not-applies-to-thumb-when-it-is-vertical – Raumfisch Apr 07 '17 at 07:50
  • I see, that's unfortunate. Did you think about using a jQuery plugin, or writing your own slider that's vertical? – Arg0n Apr 07 '17 at 07:51
  • Jquery ui is to much overhead because of it's size. I think i will probably end up in writing my own slider. – Raumfisch Apr 07 '17 at 07:56