Range Slider responsiveness and max problem

[ugunay]

Hi,

I have a problem with Syncfusion React Range Slider.

I have a simple code:

const SampleSlider: FunctionComponent<SampleSliderProps> = ({ myProps }: SampleSliderProps) => {

.....

  return (

    <>

      <SliderComponent

        type="Range"

        min={1}

        max={360}

        value={[1, 360]}

        tooltip={{ isVisible: true }}

      />

    </>

  );

};

export default SampleSlider;

When the page resizes, the range slider has a responsiveness problem. In addition, note that the max property is not set correctly, and the tooltip does not show the selected values unless I play with the min-max values of the slider.

I am attaching a video to clarify the situation.

Best regards.

Attachment: rangesliderproblem_5ece0f0d.7z

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Ugunay, 

 

Greetings from Syncfusion support. 

 

We have validated your reported problem that Slider element not adapts to the dynamically resized dimension of its parent element. 

 

We would like to let you know that Slider is an independent component which will adapts its elements dimension to match the dimension of its parent element both on initial render and on dynamically updating the parent dimension. 

 

However, handle positioning in Slider component works based on the script execution. So, we need to let Slider component know that it parent element’s dimension has been changed, dynamically by calling its refresh method to resolve your reported problem. 

 

We have prepared a sample with your shared code.  

 

https://stackblitz.com/edit/react-4h5gdp 

 

Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/slider/default/ 

 

Documentation: https://ej2.syncfusion.com/react/documentation/range-slider/getting-started/ 

 

API Reference: https://ej2.syncfusion.com/react/documentation/api/slider/ 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S.