Weird Range Slider Behavior in Chrome

[Clay]

I am working on a mobile app utilizing PhoneGap and it works wonderfully on my test iPhone, but not so well on Android phones. Since I can't just ignore the Android version, I need to make it run there. I was figuring I would just not use the range input, but then I noticed that it wasn't working on Chrome either. When you try to use it, it gets "sticky".

Here is a fiddle: http://jsfiddle.net/mUz8g/

I have distilled my code down to this

<div data-role="view" id="first" >
            <ul data-role="listview" data-style="inset">
                <li><input min="0" max="10" step="1" type="range" id="input1" /></li>
           </ul>
 </div>

app = new kendo.mobile.Application(document.body, {
  transition: "fade",
  initial:'#first',
  loading: "<h1>Please wait...</h1>"
});

Any ideas on what I am doing wrong? Thank you.

[Kiril Nikolov]

Hello Clay,

This can be fixed by using native scrolling in your mobile application. If set to true, the view will use the native scrolling available in the current platform. Native scrolling is only enabled on platforms that support it: iOS  4+, Android 2+, WP8. BlackBerry devices do support it, but the native scroller is flaky.

With the Q2 BETA release, Kendo UI comes with a new native slider, that performs well on Android devices. You can check it on the following demo:

http://demos.kendoui.com/beta/mobile/forms/index.html#/

Regards,
Kiril Nikolov
Telerik

[Clay]

Unfortunately, the useNativeScrolling setting didn't change anything. The demo page uses a Kendo slider and not the range input. Check out http://jsfiddle.net/mUz8g/2/

[Kiril Nikolov]

Hello Clay,

I have forwarded this misbehavior to the developers and it will be fixed in a future release. In the mean time I would suggest you to check the Q2 Beta release and see the native slider that is used there, as it performs well on all platforms.
 
Regards,
Kiril Nikolov
Telerik

[Clay]

Well, I got the new release and it isn't a whole lot better. A little background.. I have an app that I have been developing in Icenium and HTML5 range inputs work great on the iPhone, but not so well on the Android phones. Since the timing worked, when the latest release of Kendo came out, I utilized the Kendo sliders and voila, native sliders appeared. I put my finger on one and slid... nothing. I tried again and it slowly worked its way across the screen. But it was terribly inconsistent. In the mobile examples, there is only a single slider on the page.  My app has 10. Just for kicks, I made a bare bones app with 10 sliders that weren't connected to any events, just had them set up to be the native sliders. While pretty, they did nothing unless I was very persistent and patient.

Question: Is there any way to turn on the buttons for the slider on mobile?

Thanks.

Clay

[Kiril Nikolov]

Hi Clay,

I have reproduced you scenario in a jsBin and tested it on Android device. I can agree that the slider is not being consistent, but this is a problem caused by the way JavaScript interacts with native Android, and not in Kendo UI itself. I have tested this on an iPhone and it works perfectly well.

There is also another issue with the slider in Android - when you tap somewhere on the slider, the indicator is not moved to the tapped position. This again happens only under Android and again works well on iOS, but his is something that will be fixed with one of the upcoming builds.

Regards,

Kiril Nikolov
Telerik