Resizing browser window causes initialised sliders in inactive tabs to reset their handle to zero position

[Matt Hoskins]

I actually discovered this using the React library, but confirmed the cause using the underlying javascript components directly.

If I set up tabs with slider controls in them, set values on those sliders and then slightly resize the window what happens is if I switch to a tab that was inactive the slider's handle position will reset to the minimum.

I believe this is down to the same cause as this in that the BoundClientRect has no size:

https://www.syncfusion.com/forums/148087/slider-ticks-in-tabs-shattered

... but in this case the slider was already initialised ok and was already displaying a handle in the correct position, it's just it doing a reposition in response to the resize event of the browser window caused it to move the handle to the zero position. Example here (slider is initialised visible, if you switch to "Other tab" then resize window or the pane then switch back you'll see):

https://stackblitz.com/edit/6r81d4?file=index.ts

To my mind this possibly could count as a bug - if the slider control has the handle at a non-zero position at the point when a reposition is called and the control has no size due to being hidden I think it shouldn't reposition the handle. I accept that you may argue that if a slider his revealed from a hidden state even if it was previously shown ok the refresh should be called - if that's the case it might be worth amending your documentation on "Show slider from hidden state" to make it clear if that needs to be done even if the slider has already been initialised.

As an aside I think there is a bug with tooltip display in your documentation example of showing a slider from hidden state. If I click on "Preview Sample" and then click on "Button" the slider is displayed ok but if I hover over the handle a weird diamond blob is shown instead of the correct tooltip (and the tooltip position is still off even after moving the handle):

https://ej2.syncfusion.com/react/documentation/range-slider/how-to/show-slider-from-hidden-state

[Prasanth Madhaiyan]

Hi Matt,

Greetings from Syncfusion support.

Query 1: If I set up tabs with slider controls in them, set values on those sliders and then slightly resize the window what happens is if I switch to a tab that was inactive the slider's handle position will reset to the minimum.

We have validated your reported query in the Slider component by using your shared sample. We understand that you are facing an issue when clicking on another tab, then resizing the window, and clicking back to the Slider page, and the Slider values are not being updated properly. However, we were able to replicate this issue on our end using the shared sample.

To overcome this issue, you need to call the Slider reposition method inside the Tab component selected event.

Refer to the below code snippets.

[index.ts]

 

    //Initialize Tab component

    let tabObj: Tab = new Tab({

        items: [

            {

                header: { 'text': 'Slider1'},

                content: '<div>Click on "Other Tab" then resize pane then click back to this tab.</div><div id="slider1"></div><div>After doing this the slider will revert to the min position.</div>'

            },

            {

                header: { 'text': 'Other Tab' },

                content: '<div id="slider2">Resize pane and click back to Slider1 tab</div>'

            },

 

        ],

        selected:function (args){

            var slider = (document.getElementById('slider1') as any).ej2_instances[0];

            slider.reposition()

        }

    });

 

   …

 

For your reference, we have attached the sample.

Sample: https://stackblitz.com/edit/6r81d4-ajs253?file=index.ts

Check out the attached sample and let us know if you need any further assistance.

Query 2: if I hover over the handle a weird diamond blob is shown instead of the correct tooltip (and the tooltip position is still off even after moving the handle)

For the Tooltip issue mentioned in our Slider documentation for Show slider from hidden state in React Range slider component in this topic, we have considered it an issue, and we will fix this issue and refresh it in our documentation in any of our upcoming releases.

Regards,

Prasanth Madhaiyan.