SliderEvents TicksRendering goes on loop when changing Max value

[Carlo Toffolon]

Hi,
please check the simple code below:

when I press the button that change MaxValue, TicksRendering event goes on infinite loop and blocks all.

Here the code:

***********************************

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

@rendermode InteractiveWebAssembly

<div id="SliderTestDiv" style="position:relative">

<h3>SliderTest</h3>

    <SfSlider TValue="int" Min="0" Max=@MaxValue @bind-Value="@SliderValue">

        <SliderEvents TicksRendering="@TickesRendering" TValue="int" ></SliderEvents>

        <SliderTicks LargeStep="10" ShowSmallTicks="false" Placement="Placement.Before"> </SliderTicks>

        <SliderTooltip Placement="TooltipPlacement.After" ShowOn="TooltipShowOn.Always" IsVisible="true"></SliderTooltip>

    </SfSlider>

    <SfButton @onclick="DeletemeClick">click</SfButton>

</div>

@code {

    public double MaxValue = 100;

    public int SliderValue = 0;

    public float StepValue = 10;

    private void DeletemeClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

    {

        MaxValue = 200;

    }

    public void TickesRendering(SliderTickEventArgs args)

    {

        args.Text = " ";

        Console.WriteLine(DateTime.Now.ToString() + " TickesRendering");

    }

}

***********************************

[SureshRajan Alagarsamy]

Hi Carlo,

We have reviewed your query and understand that the TicksRendering event in the RangeSlider component keeps triggering continuously when dynamically updating the value of the Max property. We were able to replicate the reported scenario, and we have considered the reported issue as bug on our end. The fix for this issue will be included in the weekly patch release scheduled for December 24, 2024.

 

You can track the status of the fix through the following link.

 

Feedback: TicksRendering event triggers continuously when updating Max property dynamically in Blazor | Feedback Portal

 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

Regards,

Suresh.

[Carlo Toffolon]

Thank you for the quick response.

[Prasanth Madhaiyan]

Hi Carlo,

Thanks for your patience.

We are glad to announce that our patch release (V28.1.36) has been rolled out successfully.  The issue where “TicksRendering event triggers continuously when updating Max property dynamically in the Range Slider component” has been resolved in this release.

Additionally, to resolve the ticks alignment issues, you can utilize the RepositionAsync method within the TicksRendered event.

…

    <SfSlider @ref="SliderInstance" TValue="int" Min="@MinValue" Max=@MaxValue Value="0">

        <SliderEvents TicksRendering="@TickesRendering" TValue="int" TicksRendered="@TicksRendered"></SliderEvents>

    </SfSlider>

…

 

@code {

    SfSlider<int> SliderInstance;

    …

    public async Task TicksRendered()

    {

        await SliderInstance.RepositionAsync();

    }

}

To access this fix, we suggest you update the package to 28.1.36 and we include the sample in the latest version for your reference.

Sample: Attached as a zip file.

Feedback link: https://www.syncfusion.com/feedback/63840/ticksrendering-event-triggers-continuously-when-updating-max-property-dynamically

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/28.1.36?type=all#slider

Root Cause: The OnAfterRenderAsync method is not triggered due to continuous looping caused by re-rendering in the DynamicPropertyChanges method. As a result, the PropertyChanges value is not cleared in RenderAsync when the property is changed dynamically.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorWebAssemblySlider_5d900f6c.zip