Tick labels not centered inside Dialog

[Abdul Mounem]

Hi,

I'm using the slider control inside a dialog, and the issue is that it's not aligning the labels with the tickets, I tried to use the same control outside the dialog, and it did work perfectly, but inside the dialog, it didn't

[LeoLavanya Dhanaraj]

Hi Abdul,

Greetings from Syncfusion support.

Based on your shared details, we have prepared and validated the mentioned issue in the Slider component with the latest version(21.2.6). The reported issue occurs due to the Slider component is not being properly refreshed while integrating inside the Dialog component.

To overcome the Slider ticks alignment issue, you need to refresh the Slider component using the refresh method inside the Dialog open event as shown in the below code snippets.

Sample : https://stackblitz.com/edit/react-t74hty?file=index.js,index.html

[index.js]

<DialogComponent id="defaultdialog" ... open={dialogOpen} close={dialogClose}>

  <div>

    <SliderComponent

      value={0.3} ...

      ref={(slider) => {

        defaultObj = slider;

      }}

    />

  </div>

</DialogComponent>

 

let defaultObj;

function dialogOpen() {

  setStatus({ hideDialog: true });

  setDisplay('none');

  defaultObj.refresh();

}

Please check out the shared details at your end and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Abdul Mounem]

Thanks for the support