Range slider selection misalignment

[JB]

Our range slider is being drawn like this:

As soon as you re-size the browser window, or drag it, it corrects:

Any idea on fixes?

<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div style="width: 300px; display: table-cell;">
            <h3>@ProgramsResources.PageHeader</h3>
        </div>
        <div style="display: table-cell;">
            <div class="card">
                <div class="card-header">
                    Year Range
                </div>
                <div class="card-body message-body-content" style="padding-left: 10px; padding-right: 10px">
                    <SfSlider Min="@(DateTime.Now.Year - 9)" Max="@(DateTime.Now.Year + 1)" Step="1" Type=SliderType.Range @bind-Value="ViewModel.Model.FilterYearRange" >
                        <SliderEvents TValue="int[]" ValueChange="@ViewModel.FilterYearRangeChangedAsync"/>
                        <SliderTicks Placement="Placement.Both" ShowSmallTicks="false" LargeStep="1"></SliderTicks>
                    </SfSlider>
                </div>
            </div>
        </div>
    </div>
</div>

[Prasanth Madhaiyan]

Hi JB,

Greetings from Syncfusion support.

Based on the provided information, we understand that you are experiencing an issue where the Slider positions are not displaying correctly on your end. However, we have created a Blazor Slider sample using the code snippets you shared, incorporating the latest NuGet version along with the Bootstrap5 theme. Regrettably, we were unable to reproduce the reported issue on our end.

For your reference, we have attached the sample and screenshot.

Sample: https://blazorplayground.syncfusion.com/rZVAWiNCUueOANYK

Screenshot:

Check out the attached sample and if the issue still persists could you please replicate the issue in the shared sample or share the issue replicated sample? Based on that we will check and provide you a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.