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.
Yeah the range slider is just a stylized html slider, and personally I would like a directive for this.
There is the angular material slider that you could fork and adapt to your own needs…
This is very promising of course, but from the documentation:
In its current early state, use AngularJS Material Design at your own risk. APIs are changing rapidly.
Can you suggest a good alternative for immediate use in production apps? Really don’t want to include jquery and jquery ui but jquery-only dependency would be acceptable.
I’m on the same boat. I recently had to use input sliders and was surprised how unresponsive they are. First I though my fingers are just too fat to hit small touch target of the slider.
I’m, too, searching for some decent replacement and I would also rather not have jQuery/jQueryUI dependency even though I can live with just jQuery.
I really like visual style of Ionic sliders so I’m preferably looking for something similar but functionality comes first.
I’m currently evaluating these:
Angular directive. Comes completely unstyled - I have to try how pretty I can make it.
Fork of the same thing as above but with some basic styling.
There are several other but they either come with unnecessary functionality for me or they have weird or unappealing visual style.
Material slider looks awesome and has excellent responsivness but it seems like I would need to bring a lot of extra code/styling from material library for just 1 slider.
Anyone has any other recommendation for some decent sliders that work with Angular/Ionic?
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.
