Weird Range Slider Behavior in Chrome

6 posts, 0 answers
  1. Clay
    Clay avatar
    4 posts
    Member since:
    Mar 2012

    Posted 30 Jun 2013 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 02 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Clay
    Clay avatar
    4 posts
    Member since:
    Mar 2012

    Posted 03 Jul 2013 Link to this post

    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/
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 03 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Clay
    Clay avatar
    4 posts
    Member since:
    Mar 2012

    Posted 24 Jul 2013 Link to this post

    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
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready