fix problem where thumbnail is not being rendered when value is changed programmtically

Author: oneolddev

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

@@ -1,15 +1,29 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Diagnostics.CodeAnalysis;
 using System.Globalization;
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
-public partial class FluentSlider<TValue> : FluentInputBase<TValue>
+public partial class FluentSlider<TValue> : FluentInputBase<TValue>, IAsyncDisposable
     where TValue : System.Numerics.INumber<TValue>
 {
+    private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Slider/FluentSlider.razor.js";
+
+    /// <summary />
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    /// <summary />
+    private IJSObjectReference? _jsModule { get; set; }
+
     /// <summary>
     /// Gets or sets the slider's minimal value.
     /// </summary>
@@ -29,7 +43,7 @@ public partial class FluentSlider<TValue> : FluentInputBase<TValue>
     public TValue? Step { get; set; }
 
     /// <summary>
-    /// Gets or sets the orentation of the slider. See <see cref="AspNetCore.Components.Orientation"/>
+    /// Gets or sets the orientation of the slider. See <see cref="AspNetCore.Components.Orientation"/>
     /// </summary>
     [Parameter]
     public Orientation? Orientation { get; set; }
@@ -46,6 +60,21 @@ public partial class FluentSlider<TValue> : FluentInputBase<TValue>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _jsModule ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
+        }
+        else
+        {
+            if (_jsModule is not null)
+            {
+                await _jsModule!.InvokeVoidAsync("updateSlider", Element);
+            }
+        }
+    }
+
     protected override string? ClassValue
     {
         get
@@ -120,4 +149,21 @@ private static string GetStepAttributeValue()
             throw new InvalidOperationException($"The type '{targetType}' is not a supported numeric type.");
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        try
+        {
+            if (_jsModule is not null)
+            {
+                await _jsModule.DisposeAsync();
+            }
+        }
+        catch (Exception ex) when (ex is JSDisconnectedException ||
+                                   ex is OperationCanceledException)
+        {
+            // The JSRuntime side may routinely be gone already if the reason we're disposing is that
+            // the client disconnected. This is not an error.
+        }
+    }
 }