Tick labels not centered on initial render

[Carl]

I am using custom labels on a range slider. On initial render the tick labels are not centered below the ticks. After changing the slider value the labels are center.

Initial Render

After Changing Value

I'm using version 20.3.0.58.

Here's my test code:

@page "/test"

<div class="slider">

    <SfSlider ID="ticks_slider" TValue="int" Min="0" Max="5" Enabled="true" Type=SliderType.MinRange @bind-Value="@value">

        <SliderTicks Placement="Placement.After"

                     ShowSmallTicks="false"

                     LargeStep="1"></SliderTicks>

        <SliderEvents TicksRendering="@TicksRendering" TValue="int" OnChange="@SliderChanged"></SliderEvents>

    </SfSlider>

</div>

@code {

    public void SliderChanged(SliderChangeEventArgs<int> args)

    {

    }

    int value = 0;

    string[] customValues = new string[] { "Not rated", "Hate it", "Not great", "Alright", "Pretty good", "Love it" };

    public void TicksRendering(SliderTickEventArgs args)

    {

        args.Text = customValues[(int)args.Value];

        // args.HtmlAttributes["class"] = args.HtmlAttributes["class"] + " e-custom";

    }

}

<style>

    .slider {

        width: calc(100% - 100px);

    }

    </style>

Thank you for your help

[LeoLavanya Dhanaraj]

Hi Carl,

Greetings from Syncfusion support.

Based on your shared code details, we created a Slider sample with the latest package version (V20.3.60). However, the reported issue no longer occurs in our latest version, and the ticks are properly positioned at initial rendering. To overcome the reported issue, we suggest you update the latest NuGet packages.

Check out the output screenshot.

Check the attached sample and if the issue still persists, share with us the issue replication steps, video footage (if possible), and issue replicated sample that have been used at your end. These details would help us to validate and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj

Attachment: RangeSliderTicks_cf5af472.zip

[Stefano]

I'm having the same problem in version 24.1.44. I also tried updating to version 24.2.6, but the problem persists. I used the example project you attached, updating to .Net8

than

Attachment: RangeSliderTicks_cf5af472_709c82ee.zip

[Prasanth Madhaiyan]

Hi Carl,

Based on the shared Blazor Range Slider component sample, upon checking it on our end, the ticks are properly positioned at the initial rendering. We also tested it in Chrome, Firefox, and Edge browsers but were unable to replicate the mentioned scenario on our end.

For your reference, we have attached the screenshots below.

Chrome	Firefox	Edge

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.