Problems with slider after dynamically changing properties using setOptions

1 Answer 33 Views
Slider
Werdna
Top achievements
Rank 1
Werdna asked on 21 Jul 2021, 07:45 AM

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.

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 23 Jul 2021, 06:04 PM | edited on 27 Jul 2021, 03:19 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Werdna
Top achievements
Rank 1
commented on 23 Jul 2021, 09:36 PM

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
Telerik team
commented on 27 Jul 2021, 03:22 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Slider
Asked by
Werdna
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or