Range slider start flickering after change of range
Hi,
I have a problem with the SfSlider component when using Type=SliderType.Range: When dragging the slider "buttons", the interval will start flickering, as will the values in the integer array to which the component is two-way bound. Unfortunately, the problem does not always occur, so please be a bit persistent when reproducing it from my example code. I have found that putting a breakpoint in OnSliderValueChange can provoke the behaviour. For your information, I have (inconsistently) been able to reproduce it in very simple and more complex situations. In our current project, it happens most of the time :-( It can also occur with simple two-way binding using bind-Value.
I have attached a small adaption of your Slider example solution, in which the problem can sometimes be reproduced.
In the video enclosed in the attached folder ("SfSlider_Flickering.mp4"), you can see the problem occurring.
Can you help me with this?
Thanks,
Niels
Attachment: RangeSliderSample_SfSliderFlickering_c042fb30.zip
Hi Niels,
Greetings from Syncfusion support.
From your shared details, we have validated your reported issue in the Blazor Slider component. We were able to replicate the issue at our end. We suspect that the flickering issue occurs due to the dynamic changes of Slider value using the valueChanged event. Currently, we are validating this.
Meanwhile, please share the exact use case for this scenario. Whether you want to update the Slider handle position to its initial position on UI level handle change. We will check the feasibility and provide a prompt solution in another way. Please get back to us with the requested details for further assistance.
Regards,
Leo Lavanya Dhanaraj
Hi Leo
Here is our use case (simplified a bit):
<EditForm Model="@filterData">
<div id="@Id" class="maintenanceplan-filter">
<MudCard Elevation="@FmSpacing.FormCardElevation" Class="maintenanceplan-filter card">
<FluentValidationValidator @ref="fluentValidator" />
<SfSlider id="@($"{Id}_slider")" Type=SliderType.Range @bind-Value="@SliderValues" Min=@planStartYearMin Max=@planStartYearMax Step=1 />
</MudCard>
</div>
</EditForm>
Note:
- There is no ValueChanged here... just the regular two-way binding with @bind-Value. And still there is massive flickering.
- I have included the FluentValidationValidator (from Blazored.FluentValidation), since it seems to worsen the problem considerably! I have no idea why, and the validator is not used before pressing a save button. Maybe it could give you a hint though!?
Regards,
Niels
Hi Niels,
We have validated the reported issue in the Blazor Slider component and considered it as a bug on our end. The fix for this issue will be included in our Volume 3 release, which is expected to be rolled out by the end of September 2022. You can track the status of the issue fix using the following feedback link.
Feedback link: https://www.syncfusion.com/feedback/37485/flickering-when-moving-the-blazor-slider-handle-with-the-keyboard-right-left-keys
We appreciate your patience.
Regards,
Sivakumar S
Hi Niels,
Thanks for your patience.
We are glad to announce that our Essential Studio 2022 Volume 3 release v20.3.0.47 is rolled out and is available for download under the following link.
The issue with “Flickering when moving the Blazor Slider handle with the keyboard (Right, Left) keys” has been resolved in this release. To access this fix, we suggest you update the package to 20.3.47.
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.3.47?type=all#slider
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
Regards,
Sivakumar S
- 4 Replies
- 3 Participants
-
ND Niels Døssing
- Aug 30, 2022 11:33 AM UTC
- Sep 29, 2022 12:48 PM UTC
