[dev-v5] Fix Slider - add ImmediateDelay (#3986)

* Add ImmediateDelay

* Fix Unit Test

---------

Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>

Author: dvoituron

src/Core/Components/Slider/FluentSlider.razor.cs

@@ -6,6 +6,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -16,6 +17,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentSlider<TValue> : FluentInputBase<TValue>, ITooltipComponent
     where TValue : struct, IComparable<TValue>
 {
+    private readonly Debounce _debounce = new();
+
     /// <summary>
     /// Initializes a new instance of the <see cref="FluentSlider{TValue}"/> class.
     /// </summary>
@@ -80,6 +83,12 @@ public FluentSlider(LibraryConfiguration configuration) : base(configuration)
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// Gets or sets the delay, in milliseconds, before to raise the change event.
+    /// </summary>
+    [Parameter]
+    public ushort ImmediateDelay { get; set; } = 60;
+
     /// <summary />
     protected override async Task OnInitializedAsync()
     {
@@ -107,6 +116,15 @@ protected virtual Task FocusOutHandlerAsync(FocusEventArgs e)
         return Task.CompletedTask;
     }
 
+    /// <summary />
+    protected override Task ChangeHandlerAsync(ChangeEventArgs e)
+    {
+        return _debounce.RunAsync(ImmediateDelay, () =>
+        {
+            return base.ChangeHandlerAsync(e);
+        });
+    }
+
     /// <summary>
     /// Parses a string to create the <see cref="Microsoft.AspNetCore.Components.Forms.InputBase{TValue}.Value"/>.
     /// </summary>

tests/Core/Components/Slider/FluentSliderTests.razor

@@ -131,7 +131,7 @@
     {
         // Arrange
         var step = (T)Convert.ChangeType(1, typeof(T));
-        var cut = Render(@<FluentSlider TValue="T" @bind-Value="@value" Step="@step" />);
+        var cut = Render(@<FluentSlider TValue="T" @bind-Value="@value" Step="@step" ImmediateDelay="0" />);
 
         var slider = cut.Find("fluent-slider");
         var valueAttribute = slider.GetAttribute("value");