Slider issue when not initially visible on the view

[Artie]

We've run into a minor problem with the Kendo slider.  When navigating to a new view, if that view has a slider (or multiple sliders) on it that are in an element that is not visible, the user can not change the value of the slider with the mouse.  You can use the left/right arrows to change the value (and the events fire), but the slider won't move.

 If you then navigate off of the view, and then back onto that same view, the slider then works.  I've put a little demo together in the Dojo that illustrates what I'm talking about:

http://dojo.telerik.com/ihExU

1. Click "Load Secondary View:
2. Click "Show Panel 2"
3. Try to move the slider with the mouse, and then try with the keyboard arrows
4. Click "Back"
5. Click "Load Secondary View"
6. The slider now works, and has the value that was previously "set" by the arrow keys.

Any suggestions as to a workaround?​

 

[Neli]

Hello Lee,

Thank you for sharing your detailed runnable example and custom implementation for initializing and resizing the Kendo UI Slider when it starts out hidden. Your approach effectively solves the known limitation where the slider cannot calculate its dimensions or render custom labels correctly if initialized in a hidden container.

For scenarios where the Kendo UI Slider is initialized in a hidden container and uses custom labels, your method of manually updating labels and adjusting layout after calling .resize() is the most effective workaround available.

Indeed, the built-in .resize() method alone is not sufficient for custom label scenarios, and manual DOM adjustments might be necessary.

As we are also discussing the scenario in another forum thread, I would suggest you keep the conversation in a single thread.

Regards,
Neli
Progress Telerik