I find the element in general to be very unreliable on iOS Safari on iPhone and iPads. It sometimes requires two or more attempts to get the knob to pick up the drag event. I was trying to make the area of the knob larger using CSS. This kinda helps UX wise with the downside of being simply ugly.
What do you think? Did you ever get a HTML5 range slider to work as good as a native iOS range slider? If so, how did you get there?
All attempts I tried so far horribly failed the “mom test” and the “ladies with average length fingernails” test as well.
Funny enough, [insert jQuery plugin doing the same thing here] usually offers better UX than the native HTML5 implementation. I wonder if this is simply the browser having no fine-tuning for the element or touch being not really tested yet for those elements in general?
And then, there’s the different implementations on different browsers. A real pain. Wouldn’t it make sense for Ionic to try and provide a) a consistent UX in terms of touch-handling and b) design as well?
Similar problem here. In ios devices it is possible to change the value by sliding the range slider thumb button.
What I am trying to achieve is to implement a range slider with custom background where the user may touch any part of the sider to update the value.
The only way to fix this is by either relying on a 3rd party slider plugin or by implementing your own slider based on your needs. AFAIK most other mobile frameworks implement their own rangeslider UI element, not relying on the HTML5 element. Would be sweet if Ionic decides to add one.
The slider from the ng-material library doesn’t work well on iOS (yet). Works well on a desktop browser tho. I’m not sure to what extent ng-material tries to be touch optimized. But as it is a work in progress, we’ll see.
What were your results when testing the two directives you provided? I’m also currently trying out the PopSugar one and am having a tough time seeing how it’s touch capable as it’s not working very well in iOS. I’m also using the chrome mobile emulator on my app and that’s having a hard time with it as well. Were you able to find any other successful alternatives?
I pretty much gave up on finding suitable alternative (as in: suitable for my needs). For now I’m using standard input slider and hoping that something will be done to improve it’s performance.
My current hopes are that this feature https://trello.com/c/tQWhOVys/33-multiple-slider-range-input will move from “under consideration” to “cleared for inclusion”. If so, then I imagine that custom code for slider will be needed and that code will hopefuly get used for singular value slider as well.