This is a migrated thread and some comments may be shown as answers.

Slider not working on mobile(iPhone)

10 Answers 196 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Ankit
Top achievements
Rank 1
Ankit asked on 16 Aug 2018, 09:37 PM

Are there any updates on this topic ? Since I am using Kendo UI slider with razor view having version 2017.2.621.545 and I am not able to get it works in mobile devices specially on iPhone.
The code is as follows - 
 @(Html.Kendo().SliderFor(m => m.PercentChanceClose)
                        .Name("PercentChanceClose")
                        .ShowButtons(true)
                        .Tooltip(true)
                        .Max(100)
                        .Min(0)
                        .SmallStep(5)
                        .LargeStep(10)
                        .Events( e => e.Change("SliderChange"))
                        .IncreaseButtonTitle("Perecent(%) Chance Close")
                        .HtmlAttributes(new { @class = "form-control"})
                        )

JavaScript function - 

 function SliderChange(e) {

        if (e== null) {
            SliderValue(50);
        }
        else {
            SliderValue(e.value);
        }

    }


    function SliderValue(x) {
        var top = $("#PercentChanceClose").closest(".k-slider-wrap");

        if (x >= 0 && x <= 24) {
            $(".k-slider-track", top).css("background-color", "#00ff00");
            $(".k-slider-selection", top).css("background-color", "#00ff00");
          }
        else if (x >= 25 && x <= 74) {
            $(".k-slider-track", top).css("background-color", "#ffa500");
            $(".k-slider-selection", top).css("background-color", "#ffa500");
        }
        else {
            $(".k-slider-track", top).css("background-color", "#ff0000");
            $(".k-slider-selection", top).css("background-color", "#ff0000");
        }
    }

 

10 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 20 Aug 2018, 12:13 PM
Hello,

I have tested the provided sample code with the latest version of the Kendo UI MVC wrappers (2018.2.620.545) and it seems to work as expected on my iPhone. Could you provide some more details what issues you are facing?

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ankit
Top achievements
Rank 1
answered on 21 Aug 2018, 04:29 PM
Thanks Martin for the reply, for some site functionality restriction I would not be able to update our site to latest Kendo UI MVC wrapper version; Would it be possible for you to play with the version which I mentioned "2017.2.621.545" for slider on iPhone? I have attached 3 screenshots for same slider behave differently on mobile and desktop.
0
Martin
Telerik team
answered on 22 Aug 2018, 07:46 AM
Hello,

I have tested with "2017.2.621.545" version as well and it is still looks fine on my device. Guessing from the images you sent, I suspect that some layout/styling settings might cause the problem. To further investigate on this issue we will need either a runnable project that we can debug locally, or at least a live URL where we can inspect the layout of the page.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Norm
Top achievements
Rank 2
answered on 12 Feb 2019, 01:11 AM
Bump!   I'm having the exact same issue.   Did you ever figure out the problem? 
0
Martin
Telerik team
answered on 13 Feb 2019, 03:17 PM
Hello,

As stated in a previous post we can't confirm this behavior on our side neither with latest nor with the reported Kendo version. Please consider assembling a runnable demo that demonstrates the problem, and we will give our best to fix it as soon as possible.

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Norm
Top achievements
Rank 2
answered on 23 Apr 2019, 02:27 PM

here is a Dojo example.   Open it using an apple product and you will not see the slider anymore.  Works fine on linux or PC environment.    

 

https://dojo.telerik.com/@normpetroff/omAQObeV

 

0
Dimitar
Telerik team
answered on 25 Apr 2019, 12:16 PM
Hello Norm,

Thank you for providing an isolated Dojo snippet. The issue is reproducible with it on our side.
After identifying the exact issue, I found out that we have it already logged, but its current title suggests it regards a very special case. As it turns out, the case is more general - having Slider inside Window and viewing them on iOS - screenshot. I increased issue's priority based on the two reports in this thread. And I will update the issue title and description to include this more general reproduction scenario. You may subscribe to this issue to receive updates on its progress. Currently there is no known workaround for it and if we find some, we will include it in the issue.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dimitar
Telerik team
answered on 25 Apr 2019, 01:57 PM
Hello again,

After further issue isolation it turns out that it is reproducible only if kendo.mobile.all.min.css is loaded on the page. Without it the issue is not reproducible - Dojo.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Norm
Top achievements
Rank 2
answered on 26 Apr 2019, 02:28 PM

I need to use the kendo.mobile.all.min.css for switches that I have on the page.  :(   

I thank you for your update.  I will subscribe and wait for a fix. 

0
Dimitar
Telerik team
answered on 26 Apr 2019, 02:40 PM
Hi Norm,

We have release a non-mobile Switch in R1 2019 - demos. It does not require mobile.css - Dojo

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Slider
Asked by
Ankit
Top achievements
Rank 1
Answers by
Martin
Telerik team
Ankit
Top achievements
Rank 1
Norm
Top achievements
Rank 2
Dimitar
Telerik team
Share this question
or