Slider frustrating on mobile

[jdepypere]

This is a topic quite hard to explain or quantify, but I'll do my best.

First off, when you press it and wait just a second for the handle to grow, it doesn't slide any more. Secondly, when you press the bar next to the handle, and wait for the handle to grow before releasing, sometimes it doesn't change the value.

On top of all that both the handle and the bar's hitboxes are tremendously small. I am in my early 20's, using a 5-inch phone, and it gets very frustrating using this component. I compared it to Polymer's paper-slider and there I don't have any of these issues.

[sgomes]

Thanks, @jdepypere, I can confirm the issues.

Sadly, these may be browser issues, since all we're doing is essentially restyling the HTML range element (so that we maintain accessibility features and default behaviour). Polymer, as far as I know, follow a different approach by implementing the whole thing from scratch.

In any case, I'll definitely take a look and see if there's something we can do to solve any of those problems!

[sgomes]

Note to self: issues successfully reproduced on Chrome for Android.

[addyosmani]

@sgomes In your research did this turn out to be an issue with the native browser control or just our implementation?

[sgomes]

@addyosmani Sorry, still trying to figure out what's causing these.

[sgomes]

I've done a bit of investigation here, and sadly I can't figure out what we're doing wrong. This seems to be the native element not knowing how to handle the customisations in the MD spec, particularly the thumb resizing, I suspect.

If someone else wants to take a stab at it, I'd appreciate it, but otherwise I don't think it's feasible to fix this until we rewrite the component to not use the native range element, which can only happen for v2, being a BC break.

[sgomes]

Fixing this is out of scope for v1, as it would break backwards compatibility.