Problems with slider after dynamically changing properties using setOptions

[Werdna]

I have a slider on a page set to a min/max of 0 and 100.   The min/max of this slider is variable and changes depending on what a user has selected in a dropdownlist.  For example, when the user selects an item in the dropdownlist, I change the slider's min/max value of 10 and 50 using setOptions.

 var slider = $("#slider").data("kendoSlider");
                slider.setOptions({
                    min: 10,
                    max: 50,
                    smallStep: 1,
                    largeStep: 5,
                    value: 10
                });

slider.resize();

This seems to work as the slider updates to the properties I set in setOptions.  But after I do this, it doesn't consistently let me jump to a value in the slider.   For example, if I try to click the slider line at 40, the slider won't move to it.  Sometimes it will, sometimes it won't.   If I drag the slider ball to a number it works fine, if I user the increase/decrease arrow buttons it works fine.  But clicking on a number in the slider bar does not work.  

- This jumping to a number in the slider works fine before I dynamically change the properties using "setOptions".
- This problem occurs regardless of what property in the slider I change using "setOptions". 

Any ideas? Thanks.

[Stoyan]

Hello Andrew, 

I was able to observe such a behavior when the slider isn't resized after the new options are applied and when there isn't enough space on the slider for the mouse pointer to accurately click a unique value.

My suggestion is to either increase the size of the Component's container or to decrease the its smallStep property.

I hope the information above helps. Please let me know, if you have further questions. Thank you.

 

Regards,
Stoyan
Progress Telerik

[Werdna]

Hi Stoyan, 

Thank you for your suggestions.  I have tried increasing the size of the container as well as decreasing the smallStep property to differing levels.  I also resize the slider after the call to setOptions.  Regardless of the sizing, when a slider is first initialized, you can click on the largeStep label and the slider will jump to it.  But after calling setOptions to change the slider's properties, you can no longer click on the largeStep label to jump the slider to it.  Is there a workaround to that?

I believe the issue is made worse by the style sheet:  kendo.common-material.min.css.  The stylesheet makes the slider thickness very thin and maybe that's why it's difficult to click a specific number for the slider to jump to?  It is considerably better when using:  kendo.common.min.css.

[Stoyan]

Hi Werdna,

I have logged a Bug Report on your behalf that concerns the behavior when resize isn't used. You can review it here.
As a token of gratitude for bringing the issue to our attention I have update your Telerik Points.

Unfortunately, I wasn't able to reproduce the behavior when resize() was called after the setOptions method. I tried using different Themes like kendo.common-material.min.css and kendo.common-nova.min.css with no success.

Could you please modify this Dojo to reproduce the behavior as you experience it on your side. Thank you in advance.

Regards,
Stoyan
Progress Telerik