Repository: microsoft/fluentui-blazor
Pull request #3519: [FluentSlider] Refactoring
Author: login: dvoituron
Created: 2025-03-14T17:33:09Z | Merged: 2025-03-16T10:01:05Z

# [FluentSlider] Refactoring

- Update the documentation
- Remove the code to "manage" the `ReadOnly` attribute.
   And add this explaination:
   > The FluentSlider component does not support the ReadOnly attribute (using the keyboard), like the default 
   > [input type="range"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) HTML element. 
   > The ReadOnly attribute is not applicable to the slider because it is designed for text-based inputs, and sliders are 
   > primarily used for selecting a value within a range
   > The Disabled attribute is used to prevent user interaction with the slider, while ReadOnly would imply that the slider 
   > can still be interacted with but not modified, which doesn't align with the intended use of a slider.
- Remove unused `.verified` files


Diff:
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderDefault.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderDefault.razor
index e43c430766..f1525d1aba 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderDefault.razor
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderDefault.razor
@@ -1,7 +1,4 @@
-﻿<FluentStack Orientation="Orientation.Vertical">
-    <FluentSlider @bind-Value="@value">Hello</FluentSlider>
-    <FluentLabel>Value: @value</FluentLabel>
-</FluentStack>
+﻿<FluentSlider @bind-Value="@value" Label="@($"Value: {value}")" />
 
 @code
 {
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderEventCallbacks.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderEventCallbacks.razor
deleted file mode 100644
index 1738ed7adb..0000000000
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderEventCallbacks.razor
+++ /dev/null
@@ -1,19 +0,0 @@
-﻿<FluentSlider Min="10"
-              Max="40"
-              @bind-Value="@Celsius"
-              @bind-Value:after="@ValueChangedHandler"
-              Step="0.5"
-              Style="width: 300px"
-              Label="@($"C° : {Celsius}")" />
-
-<p>Convert to F° : @Fahrenheit</p>
-
-@code {
-    double Celsius = 19;
-    double Fahrenheit;
-
-    void ValueChangedHandler()
-    {
-        Fahrenheit = Celsius * 9 / 5 + 32;
-    }
-}
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderLabel.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderLabel.razor
deleted file mode 100644
index 8f3a052059..0000000000
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderLabel.razor
+++ /dev/null
@@ -1,5 +0,0 @@
-﻿<FluentStack Orientation="Orientation.Vertical">
-    <FluentSlider Value="10" Style="width: 300px;" Label="Label above" LabelPosition="LabelPosition.Above" />
-    <FluentSlider Value="10" Style="width: 300px;" Label="Label before" LabelPosition="LabelPosition.Before" />
-    <FluentSlider Value="10" Style="width: 300px;" Label="Label after" LabelPosition="LabelPosition.After" />
-</FluentStack>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderMinMaxStep.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderMinMaxStep.razor
new file mode 100644
index 0000000000..ceb9324b43
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderMinMaxStep.razor
@@ -0,0 +1,14 @@
+﻿<FluentSlider Min="10"
+              Max="40"
+              @bind-Value="@Celsius"
+              @bind-Value:after="@ValueChangedHandler"
+              Step="2.5"
+              Style="width: 300px"
+              Label="@($"C°: {Celsius:0.0} - F°: {Fahrenheit:0.0}")" />
+
+@code {
+    double Celsius = 20;
+    double Fahrenheit = 68;
+
+    void ValueChangedHandler() => Fahrenheit = Celsius * 9 / 5 + 32;
+}
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnly.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnly.razor
deleted file mode 100644
index 9d62b62737..0000000000
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnly.razor
+++ /dev/null
@@ -1 +0,0 @@
-﻿<FluentSlider Value="10" ReadOnly="true" tabindex="-1"/>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnlyDisabled.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnlyDisabled.razor
new file mode 100644
index 0000000000..ef2ced9da4
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderReadOnlyDisabled.razor
@@ -0,0 +1,4 @@
+﻿<FluentStack Orientation="Orientation.Vertical">
+    <FluentSlider Value="10" ReadOnly="true" Label="Read only slider" />
+    <FluentSlider Value="10" Disabled="true" Label="Disabled slider" />
+</FluentStack>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderSizes.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderSizes.razor
index 58b5817dcd..04e0844c0d 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderSizes.razor
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/Examples/SliderSizes.razor
@@ -1 +1,4 @@
-﻿<FluentSlider Value="10" Size="SliderSize.Small" />
+﻿<FluentStack HorizontalGap="12px">
+    <FluentSlider Value="10" Size="SliderSize.Small" Label="Small size" />
+    <FluentSlider Value="10" Size="SliderSize.Medium" Label="Medium size (default)" />
+</FluentStack>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md
index 6ebeaa0c7b..1cc975b595 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md
@@ -26,20 +26,41 @@ The **FluentSlider** component is an input where the user selects a value from w
 
 View the [Usage Guidance](https://fluent2.microsoft.design/components/web/react/slider/usage).
 
+## Default
+
+By default, the slider is a horizontal slider with a range of `0` to `100` and a step of `1`.
+
 {{ SliderDefault }}
 
-## Label
+## Min, Max and Step
+
+You can define the `Step` value of a slider so that the value will always be a mutiple of that step.
+
+{{ SliderMinMaxStep }}
+
+## ReadOnly and Disabled
+
+The slider can be set to `ReadOnly` or `Disabled` mode.
 
-{{ SliderLabel }}
+{{ SliderReadOnlyDisabled }}
+
+> The **FluentSlider** component does not support the `ReadOnly` attribute.
+> This is in line with the HTML standard that prescribes only inputs that accept
+> text entry may be read-only. See the [HTML spec](https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute)
+> and the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) for more information.
+>
+> The `Disabled` attribute is used to prevent user interaction with the slider.
 
 ## Orientation
 
-The minimum height of the slider is `120px`.
+The minimum height of the slider is `120px` (defined by the web underlying component).
 
 {{ SliderOrientation }}
 
 ## Size
 
+A slider comes in both medium and small size. Medium is the default.
+
 {{ SliderSizes }}
 
 ## Thumbs
@@ -52,17 +73,10 @@ If you add content that is **not part** of `Slot="thumb"`, it will be ignored.
 
 {{ SliderThumbs }}
 
-## ReadOnly
-
-{{ SliderReadOnly }}
-
-## EventCallback
-
-{{ SliderEventCallbacks }}
-
 ## Know restrictions
 
-At this point, the `FluentSliderLabel` elements cannot be applied.
+The `FluentSliderLabel` component (used to display the value of the slider steps)
+from version 4 is no longer supported.
 
 > These features are under investigation.
 
diff --git a/src/Core/Components/Slider/FluentSlider.razor b/src/Core/Components/Slider/FluentSlider.razor
index 83b4c487da..b0e53eeadf 100644
--- a/src/Core/Components/Slider/FluentSlider.razor
+++ b/src/Core/Components/Slider/FluentSlider.razor
@@ -4,8 +4,7 @@
 @typeparam TValue
 
 <FluentField InputComponent="@this" ForId="@Id" Class="@ClassValue" Style="@StyleValue">
-	<fluent-slider @ref="@Element"
-	               slot="input"
+	<fluent-slider slot="input"
                    id="@Id"
                    disabled="@Disabled"
                    min="@FormatValueAsStringOrNull(Min)"
diff --git a/src/Core/Components/Slider/FluentSlider.razor.cs b/src/Core/Components/Slider/FluentSlider.razor.cs
index 52201bf1af..830863064e 100644
--- a/src/Core/Components/Slider/FluentSlider.razor.cs
+++ b/src/Core/Components/Slider/FluentSlider.razor.cs
@@ -6,7 +6,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
-using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -14,11 +13,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// FluentSlider component, a slider control that allows users to select from a range of values.    
 /// </summary>
 /// <typeparam name="TValue"></typeparam>
-public partial class FluentSlider<TValue> : FluentInputBase<TValue>
-    where TValue : struct, IComparable<TValue>
+public partial class FluentSlider<TValue> : FluentInputBase<TValue> where TValue : struct, IComparable<TValue>
 {
-    private const string JAVASCRIPT_FILE = FluentJSModule.JAVASCRIPT_ROOT + "Slider/FluentSlider.razor.js";
-
     /// <summary>
     /// Initializes a new instance of the <see cref="FluentSlider{TValue}"/> class.
     /// </summary>
@@ -41,13 +37,6 @@ public FluentSlider()
         }
     }
 
-    /// <summary>
-    /// Represents a reference to a DOM element in the component. It allows interaction with the specified element in
-    /// the browser.
-    /// </summary>
-    [Parameter]
-    public ElementReference Element { get; set; }
-
     /// <summary>
     /// Gets or sets the size for the slider.
     /// </summary>
@@ -55,46 +44,37 @@ public FluentSlider()
     public SliderSize? Size { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's minimal value.
+    /// Gets or sets the slider's minimal value. Default is 0.
     /// </summary>
     [Parameter]
     public TValue? Min { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's maximum value.
+    /// Gets or sets the slider's maximum value. Default is 100.
     /// </summary>
     [Parameter]
     public TValue? Max { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's step value.
+    /// Gets or sets the slider's step value. Default is 1.
     /// </summary>
     [Parameter]
     public TValue? Step { get; set; }
 
     /// <summary>
-    /// Gets or sets the orientation of the stacked components.
+    /// Gets or sets the orientation of the component.
+    /// Default is <see cref="Orientation.Horizontal"/>.
     /// </summary>
     [Parameter]
     public Orientation Orientation { get; set; }
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
+    /// If you add content that is NOT part of `slot="thumb"` section, it will be ignored.
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
-    /// <summary />
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            var jsModule = await JSModule.ImportJavaScriptModuleAsync(JAVASCRIPT_FILE);
-
-            await jsModule.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Slider.tabindexFixer", Element);
-        }
-    }
-
     /// <summary>
     /// Formats the value as a string. Derived classes can override this to determine the formatting used for <c>CurrentValueAsString</c>.
     /// </summary>
@@ -131,11 +111,6 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
     // Only for Unit Tests
     internal string? FormatValueAsStringOrNull(TValue? value)
     {
-        if (value is null)
-        {
-            return null;
-        }
-
-        return FormatValueAsString(value.Value);
+        return value is null ? null : FormatValueAsString(value.Value);
     }
 }
diff --git a/src/Core/Components/Slider/FluentSlider.razor.ts b/src/Core/Components/Slider/FluentSlider.razor.ts
deleted file mode 100644
index f267606655..0000000000
--- a/src/Core/Components/Slider/FluentSlider.razor.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export namespace Microsoft.FluentUI.Blazor.Slider {
-
-  // fluent-slider sets negative tabindexes to 0!
-  export function tabindexFixer(ref: HTMLElement): void {
-    // If the reference element is null or undefined, exit the function
-    if (!ref) return;
-
-    // Update the tabindex attribute based on the 'readonly' attribute
-    const updateTabindex = () => {
-      // Check if the element has the 'readonly' attribute and it is not set to 'false'
-      if (ref.hasAttribute('readonly') && ref.getAttribute('readonly') !== 'false') {
-        // Set tabindex to -1 to make the element non-focusable
-        ref.setAttribute("tabindex", "-1");
-      } else {
-        // Set tabindex to 0 to make the element focusable
-        ref.setAttribute("tabindex", "0");
-      }
-    };
-
-    // Check the initial state of the element
-    updateTabindex();
-
-    // Create a MutationObserver to watch for attribute changes
-    const observer = new MutationObserver(() => updateTabindex());
-    // Start observing the element for changes to the 'readonly' and 'tabindex' attributes
-    observer.observe(ref, { attributes: true, attributeFilter: ["readonly", "tabindex"] });
-  }
-
-}
diff --git a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj
index b592a4468e..f8d3b78f4d 100644
--- a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj
+++ b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj
@@ -46,12 +46,6 @@
     <Optimize>True</Optimize>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
   </PropertyGroup>
-  <ItemGroup>
-    <TypeScriptCompile Remove="Components\Slider\FluentSlider.razor.ts" />
-  </ItemGroup>
-  <ItemGroup>
-    <Content Include="Components\Slider\FluentSlider.razor.ts" />
-  </ItemGroup>
 
   <ItemGroup>
     <None Include="..\..\README.md" Pack="true" PackagePath="\" />
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_DisabledAttribute.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_DisabledAttribute.verified.razor.html
deleted file mode 100644
index 64dec05488..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_DisabledAttribute.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" disabled="" min="0" max="10" value="0" size="medium" blazor:onchange="1"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Label.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Label.verified.razor.html
deleted file mode 100644
index 6cfebd4d23..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Label.verified.razor.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-<fluent-field id="xxx" label-position="above" class="my-3">
-  <label id="xxx" slot="label" for="xxx">label
-  </label>
-  <fluent-slider slot="input" id="xxx" min="0" value="10" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Min.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Min.verified.razor.html
deleted file mode 100644
index 038c726e58..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Min.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="2" max="10" value="0" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-999.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-999.verified.razor.html
deleted file mode 100644
index 01ffe8a6f4..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-999.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" mode="" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-SingleValue.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-SingleValue.verified.razor.html
deleted file mode 100644
index 3418d4e921..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Mode-SingleValue.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" mode="single-value" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-999.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-999.verified.razor.html
deleted file mode 100644
index 56aef625ea..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-999.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" orientation="" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Horizontal.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Horizontal.verified.razor.html
deleted file mode 100644
index d12ff8dc90..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Horizontal.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Vertical.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Vertical.verified.razor.html
deleted file mode 100644
index a2159e3bd2..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Orientation-Vertical.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" orientation="vertical" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-999.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-999.verified.razor.html
deleted file mode 100644
index 5dd9af3609..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-999.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" size="" blazor:onchange="1"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Medium.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Medium.verified.razor.html
deleted file mode 100644
index 73c45c3bd2..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Medium.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" size="medium" blazor:onchange="1"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Small.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Small.verified.razor.html
deleted file mode 100644
index 7d5843acbc..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Size-Small.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="0" size="small" blazor:onchange="1"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Step.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Step.verified.razor.html
deleted file mode 100644
index fb84c8fd62..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Step.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="42.2" value="0" step="1.5" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file
diff --git a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Value_Decimal.verified.razor.html b/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Value_Decimal.verified.razor.html
deleted file mode 100644
index 485dc37f47..0000000000
--- a/tests/Core/Components/Slider/FluentSliderTests.FluentSlider_Value_Decimal.verified.razor.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<fluent-field id="xxx" label-position="above">
-  <fluent-slider slot="input" id="xxx" min="0" max="10" value="79228162514264337593543950335" step="0" blazor:onfocusout="1" blazor:onchange="2"></fluent-slider>
-  <fluent-text as="span" size="200" slot="message"></fluent-text>
-</fluent-field>
\ No newline at end of file


Reviews:
user: login: vnbaaij
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-16T09:45:43Z
user: login: vnbaaij
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-16T10:01:03Z

Review comments:
diff_hunk: @@ -26,20 +26,42 @@ The **FluentSlider** component is an input where the user selects a value from w
 
 View the [Usage Guidance](https://fluent2.microsoft.design/components/web/react/slider/usage).
 
+## Default
+
+By default, the slider is a horizontal slider with a range of `0` to `100` and a step of `1`.
+
 {{ SliderDefault }}
 
-## Label
+## Min, Max and Step
+
+You can define the `Step` value of a slider so that the value will always be a mutiple of that step.
+
+{{ SliderMinMaxStep }}
+
+## ReadOnly and Disabled
+
+The slider can be set to `ReadOnly` or `Disabled` mode.
 
-{{ SliderLabel }}
+{{ SliderReadOnlyDisabled }}
+
+> The **FluentSlider** component does not support the `ReadOnly` attribute (using the keyboard),
+> like the default [input type="range"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) HTML element.
+> The `ReadOnly` attribute is not applicable to the slider because it is designed for text-based inputs,
+> and sliders are primarily used for selecting a value within a range
+>
+> The `Disabled` attribute is used to prevent user interaction with the slider, while `ReadOnly` would imply
+> that the slider can still be interacted with but not modified, which doesn't align with the intended use of a slider.
path: examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md
user: login: vnbaaij
body: > The **FluentSlider** component does not support the `ReadOnly` attribute. This is in line with the HTML standard that prescribes only inputs that accept text entry may be readonly. See  the [HTML spec](https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute) and the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) for more information.
>
> The `Disabled` attribute is used to prevent user interaction with the slider. 
created_at: 2025-03-16T09:36:33Z
author_association: COLLABORATOR
diff_hunk: @@ -52,17 +74,10 @@ If you add content that is **not part** of `Slot="thumb"`, it will be ignored.
 
 {{ SliderThumbs }}
 
-## ReadOnly
-
-{{ SliderReadOnly }}
-
-## EventCallback
-
-{{ SliderEventCallbacks }}
-
 ## Know restrictions
 
-At this point, the `FluentSliderLabel` elements cannot be applied.
+At this moment, the `FluentSliderLabel` elements, included in the v4 library, are not yet supported.
+The `FluentSliderLabel` elements are used to display the value of the slider steps, below the slider.
path: examples/Demo/FluentUI.Demo.Client/Documentation/Components/Slider/FluentSlider.md
user: login: vnbaaij
body: The `FluentSliderLabel` component (used to display the value of the slider steps) from version 4 is no longer supported.
created_at: 2025-03-16T09:42:52Z
author_association: COLLABORATOR
diff_hunk: @@ -41,60 +37,43 @@ public FluentSlider()
         }
     }
 
-    /// <summary>
-    /// Represents a reference to a DOM element in the component. It allows interaction with the specified element in
-    /// the browser.
-    /// </summary>
-    [Parameter]
-    public ElementReference Element { get; set; }
-
     /// <summary>
     /// Gets or sets the size for the slider.
     /// </summary>
     [Parameter]
     public SliderSize? Size { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's minimal value.
+    /// Gets or sets the slider's minimal value. Default is 0.
     /// </summary>
     [Parameter]
     public TValue? Min { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's maximum value.
+    /// Gets or sets the slider's maximum value. Default is 100.
     /// </summary>
     [Parameter]
     public TValue? Max { get; set; }
 
     /// <summary>
-    /// Gets or sets the slider's step value.
+    /// Gets or sets the slider's step value. Default is 1.
     /// </summary>
     [Parameter]
     public TValue? Step { get; set; }
 
     /// <summary>
-    /// Gets or sets the orientation of the stacked components.
+    /// Gets or sets the orientation of the stacked components. Default is <see cref="Orientation.Horizontal"/>.
path: src/Core/Components/Slider/FluentSlider.razor.cs
user: login: vnbaaij
body: /// Gets or sets the orientation of the component. Default is <see cref="Orientation.Horizontal"/>.
created_at: 2025-03-16T09:44:44Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-14T17:46:43Z
body: ✅ All tests passed successfully

 Details on [your Workflow / Core Tests](/microsoft/fluentui-blazor/actions/workflows/build-core-lib.yml) page.

<!-- Sticky Pull Request CommentTest Results -->
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-14T17:46:48Z
body: # Summary - Unit Tests Code Coverage
<details open><summary>Summary</summary>

|||
|:---|:---|
| Generated on: | 03/16/2025 - 10:02:27 |
| Coverage date: | 03/16/2025 - 10:02:15 |
| Parser: | Cobertura |
| Assemblies: | 1 |
| Classes: | 82 |
| Files: | 105 |
| **Line coverage:** | 99.3% (1900 of 1913) |
| Covered lines: | 1900 |
| Uncovered lines: | 13 |
| Coverable lines: | 1913 |
| Total lines: | 8296 |
| **Branch coverage:** | 93.3% (1154 of 1236) |
| Covered branches: | 1154 |
| Total branches: | 1236 |
| **Method coverage:** | [Feature is only available for sponsors](https://reportgenerator.io/pro) |
| Tag: | 3000_13882233324 |

</details>

## Coverage
<details><summary>Microsoft.FluentUI.AspNetCore.Components - 99.3%</summary>

|**Name**|**Line**|**Branch**|
|:---|---:|---:|
|**Microsoft.FluentUI.AspNetCore.Components**|**99.3%**|**93.3%**|
|Microsoft.FluentUI.AspNetCore.Components.AdditionalAttributesExtensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DefaultStyles|100%||
|Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs|100%|92.8%|
|Microsoft.FluentUI.AspNetCore.Components.DialogInstance|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DialogOptions|100%||
|Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader|100%||
|Microsoft.FluentUI.AspNetCore.Components.DialogResult|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.DialogResult`1|100%||
|Microsoft.FluentUI.AspNetCore.Components.DialogService|98.9%|81.4%|
|Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs|100%||
|Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Extensions.FieldSizeExtensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentAnchorButton|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentAvatar|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentBadge|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentButton|100%|93.1%|
|Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge|100%|96.1%|
|Microsoft.FluentUI.AspNetCore.Components.FluentDialog|97.4%|89.7%|
|Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody|100%|91.6%|
|Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider|100%|79.1%|
|Microsoft.FluentUI.AspNetCore.Components.FluentDivider|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentField|100%|96.5%|
|Microsoft.FluentUI.AspNetCore.Components.FluentFieldCondition|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionItem|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionOptions|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentFieldExtensions|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentFieldParameterSelector|100%|98.7%|
|Microsoft.FluentUI.AspNetCore.Components.FluentGrid|100%|90%|
|Microsoft.FluentUI.AspNetCore.Components.FluentGridItem|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1|93.3%|25%|
|Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentJSModule|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentLabel|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentLayout|100%|71.4%|
|Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem|100%|89.2%|
|Microsoft.FluentUI.AspNetCore.Components.FluentLink|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1|93.7%|94.7%|
|Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentOption|91.6%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentProgressBar|100%|95.4%|
|Microsoft.FluentUI.AspNetCore.Components.FluentRatingDisplay|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentSpinner|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentStack|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentStatus|100%||
|Microsoft.FluentUI.AspNetCore.Components.FluentSwitch|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentText|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.FluentTextArea|100%|66.6%|
|Microsoft.FluentUI.AspNetCore.Components.FluentTextInput|100%|78.5%|
|Microsoft.FluentUI.AspNetCore.Components.Icon|100%|89.4%|
|Microsoft.FluentUI.AspNetCore.Components.IconFromImage|100%||
|Microsoft.FluentUI.AspNetCore.Components.IconInfo|100%||
|Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1|60%||
|Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions|100%||
|Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt<br/>ensions|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions|100%||
|Microsoft.FluentUI.AspNetCore.Components.SpacingExtensions|100%|97.2%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.Debounce|100%|83.3%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext|100%|75%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder|100%|92.8%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc<br/>herTimerExtensions|95.7%|75%|
|Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder|100%|100%|
|Microsoft.FluentUI.AspNetCore.Components.ZIndex|100%||

</details>

<!-- Sticky Pull Request Comment -->
author_association: NONE