Update Slider fails while using display:none

[ergodaveh]

We're using the slider to display intervals within a known duration. During the user's initiated update: The Slider values are removed using removeAll method and the new range values are added using .add() method.

The slider performs as expected with the old values removed and the new range value displayed while the control is visible. However, whenever the control is hidden using display:none and later revealed. The UI display shows all items within any width and left aligned.

Scenario One: showing the successful rendering prior to any update Scenario Two: showing the un-successful rendering after revealing the hidden control post of the update (the update was performed while the control was display:none) Scenario Three: shows the successful rendering while showing the control during the update

Is there any method or routine such that Scenario Two would become successful?

[paveltyavin]

I see it on a second screen, but I can't reproduce it. Can you please replace my code here https://jsfiddle.net/1sbrx5s8/ with yours to demonstrate this issue?

[ergodaveh]

Hi Pavel Thanks for your attention to this issue. I have edited the fiddler view as such https://jsfiddle.net/1sbrx5s8/2/

i have added an event the 'addItem' button which using slider.add().

to repro: Open the Fiddler's view Move the Item initialize onload at 10-20 over to another area of the control Toggle the view to 'off' Click the Add button Toggle the view to 'on' The new item will appear at the extreme left of the control without any width.

[paveltyavin]

Ok, I got it. The problem not only with visibility, but also other style attributes like width, height etc. So we need to track their changes. There are multiple ways to handle this problem.

• Create timer, track changes once in 50ms or so. Like jquey do. Very dirty method.
• Track css changes with DOMAttrModified api. Unfortunately, this api is not supported by any browser yet.
• Create a render() method and allow you to call every time you toggle the visibility. This one I've chosen.

So. When you open the slider via UI, call slider.render() . Check this feature in 0.5.1 release, please.