[FluentSlider] Use current-value instead of value attribute in web component (#2438)

* [FluentSlider]: by using web components current-value instead of value

* fix: FluentSlider Tests

* chore: Tests.csproj

* Update Microsoft.FluentUI.AspNetCore.Components.Tests.csproj

* add FluentSlider_Binding test

---------

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

src/Core/Components/Slider/FluentSlider.razor

@@ -13,7 +13,7 @@
                orientation="@Orientation.ToAttributeValue()"
                mode="@Mode.ToAttributeValue()"
                id="@Id"
-               value="@FormatValueAsString(Value)"
+               current-value="@FormatValueAsString(Value)"
                disabled="@Disabled"
                name=@Name
                required=@Required

tests/Core/Slider/FluentSliderLabelTests.cs

@@ -13,7 +13,7 @@ public class FluentSliderLabelTests : TestBase
     }
 
     [Fact]
-    public void FluentSliderLaber_Default()
+    public void FluentSliderLabel_Default()
     {
         //Arrange
         var childContent = "<b>render me</b>";

tests/Core/Slider/FluentSliderTests.FluentSlider_Default.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" value="3" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" current-value="3" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Double.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="-1.5" max="7" step="0.5" id="xxx" value="3.5" blazor:onsliderchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="-1.5" max="7" step="0.5" id="xxx" current-value="3.5" blazor:onsliderchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Horizontal.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="0" max="100" step="10" orientation="horizontal" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" orientation="horizontal" id="xxx" current-value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_HorizontalImplicit.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" current-value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Vertical.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="vertical" min="0" max="100" step="10" orientation="vertical" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="vertical" min="0" max="100" step="10" orientation="vertical" id="xxx" current-value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_WithLabel.verified.razor.html

@@ -1,4 +1,4 @@
 
 <label for="xxx" class="fluent-input-label" style="margin-bottom: calc(var(--design-unit) * 3px);" b-hum22yrq17="">label
 </label>
-<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" current-value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_WithLabelTemplate.verified.razor.html

@@ -2,4 +2,4 @@
 <label for="xxx" class="fluent-input-label" style="margin-bottom: calc(var(--design-unit) * 3px);" b-hum22yrq17="">
   <strong>label</strong>
 </label>
-<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" current-value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.razor

@@ -77,4 +77,19 @@
         // Assert
         cut.Verify();
     }
+
+    [Fact]
+    public void FluentSlider_Binding()
+    {
+        // Arrange
+        int value = 3;
+        var cut = Render(@<FluentSlider Min="0" Max="10" Step="1" @bind-Value="@value"></FluentSlider>);
+
+        // Act
+        var slider = cut.Find("fluent-slider");
+        slider.TriggerEvent("onsliderchange", new ChangeEventArgs { Value = 2 });
+
+        // Assert
+        Assert.Equal(2, value);
+    }
 }