diff --git a/change/@fluentui-web-components-b33ad15b-6464-430d-bea6-2eb220452375.json b/change/@fluentui-web-components-b33ad15b-6464-430d-bea6-2eb220452375.json
new file mode 100644
index 0000000000000..784e7df785334
--- /dev/null
+++ b/change/@fluentui-web-components-b33ad15b-6464-430d-bea6-2eb220452375.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: update slider to use ElementInternals for form association",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 9c665172f4a7e..ad2a9f6c7d12a 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -6,7 +6,6 @@
 
 /// <reference types="web" />
 
-import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
@@ -1999,6 +1998,23 @@ export class Drawer extends FASTElement {
     type: DrawerType;
 }
 
+// Warning: (ae-missing-release-tag) "DrawerBody" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export class DrawerBody extends FASTElement {
+}
+
+// @public (undocumented)
+export const DrawerBodyDefinition: FASTElementDefinition<typeof DrawerBody>;
+
+// @public
+export const DrawerBodyStyles: ElementStyles;
+
+// Warning: (ae-missing-release-tag) "template" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const DrawerBodyTemplate: ElementViewTemplate<DrawerBody>;
+
 // @public (undocumented)
 export const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
 
@@ -2847,48 +2863,65 @@ export const shadow8 = "var(--shadow8)";
 // @public
 export const shadow8Brand = "var(--shadow8Brand)";
 
-// Warning: (ae-forgotten-export) The symbol "FormAssociatedSlider" needs to be exported by the entry point index.d.ts
-//
 // @public
-export class Slider extends FormAssociatedSlider implements SliderConfiguration {
+export class Slider extends FASTElement implements SliderConfiguration {
+    constructor();
     // @internal
     calculateNewValue(rawValue: number): number;
+    checkValidity(): boolean;
     // @internal (undocumented)
     connectedCallback(): void;
     decrement(): void;
     // @internal (undocumented)
     direction: Direction;
+    disabled: boolean;
+    // (undocumented)
+    protected disabledChanged(): void;
     // @internal (undocumented)
     disconnectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    static formAssociated: boolean;
+    // @internal
+    formDisabledCallback(disabled: boolean): void;
+    // @internal
+    formResetCallback(): void;
     // (undocumented)
-    handleChange(source: any, propertyName: string): void;
+    handleChange(_: any, propertyName: string): void;
     // (undocumented)
-    handleMouseDown: (e: MouseEvent | null) => void;
-    handleThumbMouseDown: (event: MouseEvent | null) => void;
+    handlePointerDown: (event: PointerEvent | null) => void;
+    handleThumbPointerDown: (event: PointerEvent | null) => void;
     increment(): void;
-    // @internal (undocumented)
     initialValue: string;
+    // @internal
+    protected initialValueChanged(_: string, next: string): void;
     // @internal (undocumented)
     isDragging: boolean;
     // (undocumented)
-    keypressHandler: (e: KeyboardEvent) => void;
-    max: number;
+    keypressHandler: (event: KeyboardEvent) => void;
+    get labels(): ReadonlyArray<Node>;
+    max: string;
     // (undocumented)
     protected maxChanged(): void;
-    min: number;
+    min: string;
     // (undocumented)
     protected minChanged(): void;
     mode: SliderMode;
-    orientation: Orientation;
+    orientation?: Orientation;
     // (undocumented)
-    protected orientationChanged(): void;
+    protected orientationChanged(prev: string | undefined, next: string | undefined): void;
     // @internal (undocumented)
     position: string;
-    readOnly: boolean;
-    // (undocumented)
-    protected readOnlyChanged(): void;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    // @internal
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    // @internal
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     size?: SliderSize;
-    step: number | undefined;
+    // (undocumented)
+    protected sizeChanged(prev: string, next: string): void;
+    step: string;
     // (undocumented)
     protected stepChanged(): void;
     // @internal (undocumented)
@@ -2907,11 +2940,16 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     trackMinWidth: number;
     // @internal (undocumented)
     trackWidth: number;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get value(): string;
+    set value(value: string);
     get valueAsNumber(): number;
     set valueAsNumber(next: number);
-    // @internal (undocumented)
-    valueChanged(previous: string, next: string): void;
-    valueTextFormatter: (value: string) => string | null;
+    valueTextFormatter: (value: string) => string;
+    // (undocumented)
+    protected valueTextFormatterChanged(): void;
+    get willValidate(): boolean;
 }
 
 // @public (undocumented)
@@ -2921,9 +2959,9 @@ export interface SliderConfiguration {
     // (undocumented)
     disabled?: boolean;
     // (undocumented)
-    max: number;
+    max?: string;
     // (undocumented)
-    min: number;
+    min?: string;
     // (undocumented)
     orientation?: SliderOrientation;
 }
diff --git a/packages/web-components/src/slider/slider.options.ts b/packages/web-components/src/slider/slider.options.ts
index b54abd3229f79..f97f798cde1d6 100644
--- a/packages/web-components/src/slider/slider.options.ts
+++ b/packages/web-components/src/slider/slider.options.ts
@@ -46,8 +46,8 @@ export type SliderMode = ValuesOf<typeof SliderMode>;
  * @public
  */
 export interface SliderConfiguration {
-  max: number;
-  min: number;
+  max?: string;
+  min?: string;
   orientation?: SliderOrientation;
   direction?: Direction;
   disabled?: boolean;
diff --git a/packages/web-components/src/slider/slider.spec.ts b/packages/web-components/src/slider/slider.spec.ts
index 45e03a9a9d7d1..955b3f97c850d 100644
--- a/packages/web-components/src/slider/slider.spec.ts
+++ b/packages/web-components/src/slider/slider.spec.ts
@@ -23,125 +23,117 @@ test.describe('Slider', () => {
     await page.close();
   });
 
-  test('should set and retrieve the `size` property correctly', async () => {
-    await element.evaluate((node: Slider) => {
-      node.size = 'small';
-    });
-
-    await expect(element).toHaveJSProperty('size', 'small');
-
-    await element.evaluate((node: Slider) => {
-      node.size = 'medium';
-    });
-
-    await expect(element).toHaveJSProperty('size', 'medium');
-  });
-
   // Foundation tests
-  test('should have a role of `slider`', async () => {
+  test('should have a default role of `slider`', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
-    await expect(element).toHaveAttribute('role', 'slider');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'slider');
   });
 
-  test('should set a default `min` property of 0 when `min` is not provided', async () => {
+  test('should have default empty string values if `min`, `max`, and `step` attributes are not set', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
-    await expect(element).toHaveJSProperty('min', 0);
+    await expect(element).toHaveJSProperty('min', '');
+    await expect(element).toHaveJSProperty('max', '');
+    await expect(element).toHaveJSProperty('step', '');
   });
 
-  test('should set a default `max` property of 10 when `max` is not provided', async () => {
+  test('should reference connected <label> elements', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <label for="slider">Label 1</label>
+        <fluent-slider id="slider"></fluent-slider>
+        <label for="slider">Label 2</label>
+      `;
     });
 
-    await expect(element).toHaveJSProperty('max', 10);
+    await expect(element).toHaveJSProperty('labels.length', 2);
+    expect(await element.evaluate((el: Slider) => el.labels[0].textContent)).toBe('Label 1');
+    expect(await element.evaluate((el: Slider) => el.labels[1].textContent)).toBe('Label 2');
   });
 
   test('should set a `tabindex` of 0', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await expect(element).toHaveAttribute('tabindex', '0');
   });
 
-  test('should NOT set a default `aria-disabled` value when `disabled` is not defined', async () => {
+  test('should set a default `elementInternals.ariaOrientation` when `orientation` is not defined', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
-    const hasAriaDisabled = await element.evaluate((node: Element) => node.hasAttribute('aria-disabled'));
-
-    expect(hasAriaDisabled).toBe(false);
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'horizontal');
   });
 
-  test('should set a default `aria-orientation` value when `orientation` is not defined', async () => {
+  test('should initialize to the initial value if no value property is set', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'horizontal');
+    await expect(element).toHaveJSProperty('value', '50');
   });
 
-  test('should NOT set a default `aria-readonly` value when `readonly` is not defined', async () => {
+  test('should NOT set default `elementInternals.ariaDisabled` when `disabled` is not defined', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-              <fluent-slider></fluent-slider>
-          `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
-    const hasAriaReadonly = await element.evaluate((node: Element) => node.hasAttribute('aria-readonly'));
-
-    expect(hasAriaReadonly).toBe(false);
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'false');
   });
 
-  test('should initialize to the initial value if no value property is set', async () => {
+  test('should set `elementInternals.ariaDisabled` when `disabled` is present', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider disabled></fluent-slider>
+      `;
     });
 
-    const initialValue = await element.evaluate<string, Slider>(node => node.initialValue);
-
-    await expect(element).toHaveJSProperty('value', initialValue);
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'true');
   });
 
-  test('should set the `aria-disabled` attribute when `disabled` value is true', async () => {
+  test('should set the `elementInternals.ariaDisabled` when `disabled` value is true', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
       node.disabled = true;
     });
 
-    await expect(element).toHaveAttribute('aria-disabled', 'true');
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'true');
+
+    await element.evaluate((node: Slider) => {
+      node.disabled = false;
+    });
+
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'false');
   });
 
   test('should NOT set a tabindex when `disabled` value is true', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
@@ -151,45 +143,63 @@ test.describe('Slider', () => {
     await expect(element).not.toHaveAttribute('tabindex', '0');
   });
 
-  test('should set the `aria-readonly` attribute when `readonly` value is true', async () => {
+  test('should be enabled/disabled by the associated fieldset', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
+        <form>
+          <fieldset>
             <fluent-slider></fluent-slider>
-        `;
+          </fieldset>
+        </form>
+      `;
     });
 
-    await element.evaluate((node: Slider) => {
-      node.readOnly = true;
-    });
+    const fieldset = page.locator('fieldset');
+
+    await fieldset.evaluate((node: HTMLFieldSetElement) => (node.disabled = true));
 
-    await expect(element).toHaveAttribute('aria-readonly', 'true');
+    // The `disabled` property and attribute should not be affected.
+    await expect(element).toHaveJSProperty('disabled', false);
+    await expect(element).not.toHaveAttribute('disabled');
+    // But `ariaDisabled` and `tabIndex` should be updated.
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'true');
+    await expect(element).toHaveAttribute('tabindex', '-1');
+
+    await fieldset.evaluate((node: HTMLFieldSetElement) => (node.disabled = false));
+
+    // The `disabled` property and attribute should not be affected.
+    await expect(element).toHaveJSProperty('disabled', false);
+    await expect(element).not.toHaveAttribute('disabled');
+    // But `ariaDisabled` and `tabIndex` should be updated.
+    await expect(element).toHaveJSProperty('elementInternals.ariaDisabled', 'false');
+    await expect(element).toHaveAttribute('tabindex', '0');
   });
 
-  test('should set the `aria-orientation` attribute equal to the `orientation` value', async () => {
+  test('should set `elementInternals.ariaOrientation` equal to the `orientation` value', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
       node.orientation = 'horizontal';
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'horizontal');
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'horizontal');
 
-    await element.evaluate((node: Slider, SliderOrientation) => {
+    await element.evaluate((node: Slider) => {
       node.orientation = 'vertical';
     });
 
-    await expect(element).toHaveAttribute('aria-orientation', 'vertical');
+    await expect(element).toHaveJSProperty('elementInternals.ariaOrientation', 'vertical');
   });
 
   test('should set direction equal to the `direction` value', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-              <fluent-slider></fluent-slider>
-          `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
@@ -205,54 +215,68 @@ test.describe('Slider', () => {
     await expect(element).toHaveJSProperty('direction', 'rtl');
   });
 
-  test('should set the `aria-valuenow` attribute with the `value` property when provided', async () => {
+  test('should set and retrieve the `size` property correctly', async () => {
+    await element.evaluate((node: Slider) => {
+      node.size = 'small';
+    });
+
+    await expect(element).toHaveJSProperty('size', 'small');
+
+    await element.evaluate((node: Slider) => {
+      node.size = 'medium';
+    });
+
+    await expect(element).toHaveJSProperty('size', 'medium');
+  });
+
+  test('should set `elementInternals.ariaValueNow` with the `value` property when provided', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
       node.value = '8';
     });
 
-    await expect(element).toHaveAttribute('aria-valuenow', '8');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '8');
   });
 
-  test('should set the `aria-valuemin` attribute with the `min` property when provided', async () => {
+  test('should set `elementInternals.ariaValueMin` with the `min` property when provided', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
-      node.min = 0;
+      node.min = '0';
     });
 
-    await expect(element).toHaveAttribute('aria-valuemin', '0');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueMin', '0');
   });
 
-  test('should set the `aria-valuemax` attribute with the `max` property when provided', async () => {
+  test('should set `elementInternals.ariaValueMax` attribute with the `max` property when provided', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
-      node.max = 75;
+      node.max = '75';
     });
 
-    await expect(element).toHaveAttribute('aria-valuemax', '75');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueMax', '75');
   });
 
   test.describe('valueAsNumber', () => {
     test('should allow setting value with number', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider></fluent-slider>
-            `;
+          <fluent-slider></fluent-slider>
+        `;
       });
 
       await element.evaluate((node: Slider) => {
@@ -265,8 +289,8 @@ test.describe('Slider', () => {
     test('should allow reading value as number', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider></fluent-slider>
-            `;
+          <fluent-slider></fluent-slider>
+        `;
       });
 
       await element.evaluate((node: Slider) => {
@@ -277,44 +301,48 @@ test.describe('Slider', () => {
     });
   });
 
-  test('should set an `aria-valuestring` attribute with the result of the valueTextFormatter() method', async () => {
+  test('should set `elementInternals.ariaValueText` attribute with the result of the valueTextFormatter() method', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
       node.valueTextFormatter = () => 'Seventy Five Years';
     });
 
-    await expect(element).toHaveAttribute('aria-valuetext', 'Seventy Five Years');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueText', 'Seventy Five Years');
+
+    await element.evaluate((node: Slider) => {
+      node.valueTextFormatter = value => `New value is ${value}`;
+      node.value = '100';
+    });
+
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueText', 'New value is 100');
   });
 
   test.describe('increment and decrement methods', () => {
     test('should increment the value when the `increment()` method is invoked', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider min="0" max="100" value="50" step="5"></fluent-slider>
-            `;
+          <fluent-slider min="0" max="100" value="50" step="5"></fluent-slider>
+        `;
       });
 
-      await expect(element).toHaveAttribute('aria-valuenow', '50');
-
       await element.evaluate((node: Slider) => {
         node.increment();
       });
 
       await expect(element).toHaveJSProperty('value', '55');
-
-      await expect(element).toHaveAttribute('aria-valuenow', '55');
+      await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '55');
     });
 
     test('should decrement the value when the `decrement()` method is invoked', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider min="0" max="100" value="50" step="5"></fluent-slider>
-            `;
+          <fluent-slider min="0" max="100" value="50" step="5"></fluent-slider>
+        `;
       });
 
       await element.evaluate((node: Slider) => {
@@ -322,33 +350,29 @@ test.describe('Slider', () => {
       });
 
       await expect(element).toHaveJSProperty('value', '45');
-
-      await expect(element).toHaveAttribute('aria-valuenow', '45');
+      await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '45');
     });
 
     test('should increment the value when the `increment()` method is invoked and step is not provided', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider min="0" max="100" value="50"></fluent-slider>
-            `;
+          <fluent-slider min="0" max="100" value="50"></fluent-slider>
+        `;
       });
 
-      await expect(element).toHaveAttribute('aria-valuenow', '50');
-
       await element.evaluate((node: Slider) => {
         node.increment();
       });
 
       await expect(element).toHaveJSProperty('value', '51');
-
-      await expect(element).toHaveAttribute('aria-valuenow', '51');
+      await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '51');
     });
 
     test('should decrement the value when the `decrement()` method is invoked and step is not provided', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <fluent-slider min="0" max="100" value="50"></fluent-slider>
-            `;
+          <fluent-slider min="0" max="100" value="50"></fluent-slider>
+        `;
       });
 
       await element.evaluate((node: Slider) => {
@@ -356,18 +380,17 @@ test.describe('Slider', () => {
       });
 
       await expect(element).toHaveJSProperty('value', '49');
-
-      await expect(element).toHaveAttribute('aria-valuenow', '49');
+      await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '49');
     });
   });
 
   test('should increase or decrease the slider value on arrow left/right keys', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <form>
-                <fluent-slider min="0" max="100"></fluent-slider>
-            </form>
-        `;
+        <form>
+            <fluent-slider min="0" max="100"></fluent-slider>
+        </form>
+      `;
     });
 
     await element.waitFor({ state: 'attached' });
@@ -394,10 +417,10 @@ test.describe('Slider', () => {
   test('should increase or decrease the slider value on arrow up/down keys', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <form>
-                <fluent-slider min="0" max="100"></fluent-slider>
-            </form>
-        `;
+        <form>
+            <fluent-slider min="0" max="100"></fluent-slider>
+        </form>
+      `;
     });
 
     await element.waitFor({ state: 'attached' });
@@ -424,8 +447,8 @@ test.describe('Slider', () => {
   test('should constrain and normalize the value between `min` and `max` when the value is out of range', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider min="0" max="100"></fluent-slider>
-        `;
+        <fluent-slider min="0" max="100"></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
@@ -434,7 +457,7 @@ test.describe('Slider', () => {
 
     await expect(element).toHaveJSProperty('value', '100');
 
-    await expect(element).toHaveAttribute('aria-valuenow', '100');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '100');
 
     await element.evaluate((node: Slider) => {
       node.value = '-5';
@@ -443,30 +466,58 @@ test.describe('Slider', () => {
     await expect(element).toHaveJSProperty('value', '0');
   });
 
-  test('should initialize to the provided value attribute if set pre-connection', async () => {
+  test('should return string values for `min`, `max`, and `step` regardless the value types were used to set', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider value="4"></fluent-slider>
-        `;
+        <fluent-slider min="10" max="100" step="20"></fluent-slider>
+      `;
     });
 
-    await element.waitFor({ state: 'attached' });
+    await element.evaluate((node: Slider) => {
+      // @ts-expect-error test incorrect value type handling
+      node.min = 20;
+      // @ts-expect-error test incorrect value type handling
+      node.max = 110;
+      // @ts-expect-error test incorrect value type handling
+      node.step = 10;
+    });
 
-    await expect(element).toHaveJSProperty('value', '4');
+    await expect(element).toHaveJSProperty('min', '20');
+    await expect(element).toHaveJSProperty('max', '110');
+    await expect(element).toHaveJSProperty('step', '10');
   });
 
-  test('should initialize to the provided value attribute if set post-connection', async () => {
+  test('should set to empty strings if `min`, `max`, and `step` to be set as invalid values', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider></fluent-slider>
-        `;
+        <fluent-slider min="10" max="200" step="20"></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
-      node.setAttribute('value', '3');
+      // @ts-expect-error test incorrect value type handling
+      node.min = undefined;
+      // @ts-expect-error test incorrect value type handling
+      node.max = null;
+      node.step = 'not a number';
     });
 
-    await expect(element).toHaveJSProperty('value', '3');
+    await expect(element).toHaveJSProperty('min', '');
+    await expect(element).toHaveJSProperty('max', '');
+    await expect(element).toHaveJSProperty('step', '');
+  });
+
+  test('should initialize to the provided value attribute if set pre-connection', async () => {
+    await root.evaluate(node => {
+      node.innerHTML = /* html */ `
+        <fluent-slider value="4"></fluent-slider>
+      `;
+    });
+
+    await element.waitFor({ state: 'attached' });
+
+    await expect(element).toHaveJSProperty('value', '4');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '4');
   });
 
   test('should initialize to the provided value property if set pre-connection', async () => {
@@ -479,13 +530,29 @@ test.describe('Slider', () => {
     });
 
     await expect(element).toHaveJSProperty('value', '3');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '3');
+  });
+
+  test('should initialize to the provided value attribute if set post-connection', async () => {
+    await root.evaluate(node => {
+      node.innerHTML = /* html */ `
+        <fluent-slider></fluent-slider>
+      `;
+    });
+
+    await element.evaluate((node: Slider) => {
+      node.setAttribute('value', '3');
+    });
+
+    await expect(element).toHaveJSProperty('value', '3');
+    await expect(element).toHaveJSProperty('elementInternals.ariaValueNow', '3');
   });
 
   test('should update the `stepMultiplier` when the `step` attribute has been updated', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-            <fluent-slider step="2" value="4"></fluent-slider>
-        `;
+        <fluent-slider step="2" value="4"></fluent-slider>
+      `;
     });
 
     await element.evaluate((node: Slider) => {
@@ -495,21 +562,21 @@ test.describe('Slider', () => {
     await expect(element).toHaveJSProperty('value', '6');
 
     await element.evaluate((node: Slider) => {
-      node.step = 0.1;
+      node.step = '0.1';
       node.increment();
     });
 
     await expect(element).toHaveJSProperty('value', '6.1');
   });
 
-  test.describe("when the owning form's reset() method is invoked", () => {
+  test.describe('when the associated form’s reset() method is invoked', () => {
     test('should reset its `value` property to the midpoint if no `value` attribute is set', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <form>
-                    <fluent-slider></fluent-slider>
-                </form>
-            `;
+          <form>
+            <fluent-slider></fluent-slider>
+          </form>
+        `;
       });
 
       const form = page.locator('form');
@@ -524,16 +591,16 @@ test.describe('Slider', () => {
         node.reset();
       });
 
-      await expect(element).toHaveJSProperty('value', '5');
+      await expect(element).toHaveJSProperty('value', '50');
     });
 
     test('should reset its `value` property to match the `value` attribute when it is set', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <form>
-                    <fluent-slider min="0" max="100"></fluent-slider>
-                </form>
-            `;
+          <form>
+            <fluent-slider min="0" max="100"></fluent-slider>
+          </form>
+        `;
       });
 
       const form = page.locator('form');
@@ -559,10 +626,10 @@ test.describe('Slider', () => {
     test('should put the control into a clean state, where the value attribute changes the value property prior to user or programmatic interaction', async () => {
       await root.evaluate(node => {
         node.innerHTML = /* html */ `
-                <form>
-                    <fluent-slider min="0" max="100"></fluent-slider>
-                </form>
-            `;
+          <form>
+            <fluent-slider min="0" max="100"></fluent-slider>
+          </form>
+        `;
       });
 
       const form = page.locator('form');
@@ -575,7 +642,7 @@ test.describe('Slider', () => {
         node.setAttribute('value', '8');
       });
 
-      await expect(element).toHaveJSProperty('value', '7');
+      await expect(element).toHaveJSProperty('value', '8');
 
       await form.evaluate<void, HTMLFormElement>(node => {
         node.reset();
@@ -590,4 +657,101 @@ test.describe('Slider', () => {
       await expect(element).toHaveJSProperty('value', '3');
     });
   });
+
+  test.describe('`change` event', () => {
+    test('should emit `change` event when `value` property changed', async () => {
+      await root.evaluate(node => {
+        node.innerHTML = /* html */ `
+          <fluent-slider></fluent-slider>
+        `;
+      });
+
+      const [wasChanged] = await Promise.all([
+        element.evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        element.evaluate((node: Slider) => {
+          node.value = '10';
+        }),
+      ]);
+
+      expect(wasChanged).toBe(true);
+    });
+
+    test('should emit `change` event if the `value` attribute changed', async () => {
+      await root.evaluate(node => {
+        node.innerHTML = /* html */ `
+          <fluent-slider></fluent-slider>
+        `;
+      });
+
+      const [wasChanged] = await Promise.all([
+        element.evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        element.evaluate((node: Slider) => {
+          node.setAttribute('value', '10');
+        }),
+      ]);
+
+      expect(wasChanged).toBe(true);
+    });
+
+    test('should emit `change` event if changes on `min` causes `value` change', async () => {
+      await root.evaluate(node => {
+        node.innerHTML = /* html */ `
+          <fluent-slider min="10" value="20" max="30"></fluent-slider>
+        `;
+      });
+
+      const [wasChanged] = await Promise.all([
+        element.evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        element.evaluate((node: Slider) => {
+          node.min = '21';
+        }),
+      ]);
+
+      expect(wasChanged).toBe(true);
+    });
+
+    test('should emit `change` event if changes on `max` causes `value` change', async () => {
+      await root.evaluate(node => {
+        node.innerHTML = /* html */ `
+          <fluent-slider min="10" value="20" max="30"></fluent-slider>
+        `;
+      });
+
+      const [wasChanged] = await Promise.all([
+        element.evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        element.evaluate((node: Slider) => {
+          node.max = '19';
+        }),
+      ]);
+
+      expect(wasChanged).toBe(true);
+    });
+
+    test('should emit `change` event if changes on `step` causes `value` change', async () => {
+      await root.evaluate(node => {
+        node.innerHTML = /* html */ `
+          <fluent-slider min="10" value="20" step="10" max="30"></fluent-slider>
+        `;
+      });
+
+      const [wasChanged] = await Promise.all([
+        element.evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        element.evaluate((node: Slider) => {
+          node.step = '11';
+        }),
+      ]);
+
+      expect(wasChanged).toBe(true);
+    });
+  });
 });
diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts
index 2982c23813536..1c196781782ee 100644
--- a/packages/web-components/src/slider/slider.stories.ts
+++ b/packages/web-components/src/slider/slider.stories.ts
@@ -1,63 +1,76 @@
 import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
-import { SliderSize as SliderSetSize } from './slider.options.js';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import type { Meta } from '@storybook/html';
+import { renderComponent, Story, StoryArgs } from '../helpers.stories.js';
+import { LabelPosition } from '../field/field.options.js';
+import { SliderOrientation as SliderSetOrientation, SliderSize as SliderSetSize } from './slider.options.js';
 import type { Slider as FluentSlider } from './slider.js';
 
-type SliderStoryArgs = Args & FluentSlider;
+type SliderStoryArgs = StoryArgs<FluentSlider>;
 type SliderStoryMeta = Meta<SliderStoryArgs>;
 
 const storyTemplate = html<SliderStoryArgs>`
   <fluent-slider
-    ?disabled=${x => x.disabled}
-    ?readonly=${x => x.readOnly}
-    step=${x => x.step}
-    size=${x => x.size}
-    min=${x => x.min}
-    max=${x => x.max}
-    orientation=${x => x.orientation}
-    value=${x => x.value}
+    ?disabled="${x => x.disabled}"
+    id="${x => x.id}"
+    step="${x => x.step}"
+    size="${x => x.size}"
+    min="${x => x.min}"
+    max="${x => x.max}"
+    orientation="${x => x.orientation}"
+    value="${x => x.value}"
+    slot="${x => x.slot}"
   ></fluent-slider>
 `;
 
+const fieldTemplate = html<SliderStoryArgs>`
+  <fluent-field label-position="${x => x.labelPosition}">
+    <label slot="label" for="${x => x.id}">${x => x.label}</label>
+    ${storyTemplate}
+  </fluent-field>
+`;
+
 export default {
   title: 'Components/Slider',
   args: {
     disabled: false,
-    readOnly: false,
-    min: 0,
-    max: 100,
     size: SliderSetSize.medium,
-    orientation: 'horizontal',
+    orientation: SliderSetOrientation.horizontal,
   },
   argTypes: {
-    disabled: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    min: {
-      control: 'number',
-      defaultValue: 0,
-    },
-    max: {
-      control: 'number',
-      defaultValue: 100,
+    disabled: {
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' } },
     },
-    value: { control: 'number', defaultValue: 50 },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    value: { control: 'number' },
+    step: { control: 'number' },
     size: {
       control: {
         type: 'inline-radio',
         options: Object.values(SliderSetSize),
       },
+      table: { defaultValue: { summary: 'medium' } },
     },
     orientation: {
       control: {
         type: 'inline-radio',
-        options: ['horizontal', 'vertical'],
+        options: Object.values(SliderSetOrientation),
       },
     },
   },
 } as SliderStoryMeta;
 
-export const Slider = renderComponent(storyTemplate).bind({});
+export const Slider: Story<FluentSlider> = renderComponent(storyTemplate).bind({});
+
+export const SliderInField: Story<FluentSlider> = renderComponent(fieldTemplate).bind({});
+SliderInField.args = {
+  id: uniqueId('slider-'),
+  label: 'Slider (default)',
+  labelPosition: LabelPosition.above,
+  slot: 'input',
+};
 
 export const SliderOrientation = renderComponent(html<SliderStoryArgs>`
   <fluent-slider orientation="vertical" step="20" value="60" min="0" max="100"></fluent-slider>
@@ -65,8 +78,8 @@ export const SliderOrientation = renderComponent(html<SliderStoryArgs>`
 `);
 
 export const SliderSize = renderComponent(html<SliderStoryArgs>`
-  <fluent-slider size="small" value="10" min="0" max="10"></fluent-slider>
-  <fluent-slider size="medium" value="10" min="0" max="10"></fluent-slider>
+  <fluent-slider size="small" value="10" min="0" max="100"></fluent-slider>
+  <fluent-slider size="medium" value="10" min="0" max="100"></fluent-slider>
 `);
 
 export const SliderSteps = renderComponent(html<SliderStoryArgs>`
@@ -77,3 +90,10 @@ export const SliderDisabled = renderComponent(html<SliderStoryArgs>`
   <fluent-slider disabled value="10" min="0" max="100"></fluent-slider>
   <fluent-slider step="25" disabled value="50" min="0" max="100"></fluent-slider>
 `);
+
+export const SliderInRTL = renderComponent(html<SliderStoryArgs>`
+  <div dir="rtl">
+    <fluent-slider orientation="vertical" step="20" value="60" min="0" max="100"></fluent-slider>
+    <fluent-slider orientation="horizontal" step="20" value="60" min="0" max="100"></fluent-slider>
+  </div>
+`);
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 6174f55c2e8dd..ac1c7a812170c 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -1,10 +1,10 @@
 import { css } from '@microsoft/fast-element';
+import { smallState, verticalState } from '../styles/states/index.js';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
   borderRadiusSmall,
-  colorBrandBackground,
   colorCompoundBrandBackground,
   colorCompoundBrandBackgroundHover,
   colorCompoundBrandBackgroundPressed,
@@ -13,7 +13,6 @@ import {
   colorNeutralForegroundDisabled,
   colorNeutralStroke1,
   colorNeutralStrokeAccessible,
-  colorNeutralStrokeDisabled,
   colorStrokeFocus1,
   colorStrokeFocus2,
 } from '../theme/design-tokens.js';
@@ -22,127 +21,98 @@ import {
  * @public
  */
 export const styles = css`
-  ${display('inline-grid')} :host {
-    --thumb-size: 18px;
-    --thumb-padding: 3px;
-    --thumb-translate: calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);
-    --track-overhang: -2px;
-    --track-width: 4px;
-    --fast-slider-height: calc(var(--thumb-size) * 10);
+  ${display('inline-grid')}
+
+  :host {
+    --thumb-size: 20px;
+    --track-margin-inline: calc(var(--thumb-size) / 2);
+    --track-size: 4px;
+    --track-overhang: calc(var(--track-size) / -2);
     --slider-direction: 90deg;
+    --border-radius: ${borderRadiusMedium};
+    --step-marker-inset: var(--track-overhang) -1px;
+    position: relative;
     align-items: center;
+    justify-content: center;
     box-sizing: border-box;
     outline: none;
-    cursor: pointer;
     user-select: none;
-    border-radius: ${borderRadiusSmall};
-    touch-action: pan-y;
-    min-width: calc(var(--thumb-size) * 1px);
-    width: 100%;
-  }
-
-  :host([size='small']) {
-    --thumb-size: 14px;
-    --track-width: 2px;
-    --thumb-padding: 3px;
-  }
-
-  :host([orientation='vertical']) {
-    --slider-direction: 0deg;
-    height: 160px;
-    min-height: var(--thumb-size);
-    touch-action: pan-x;
-    padding: 8px 0;
-    width: auto;
-    min-width: auto;
-  }
-
-  :host([disabled]:hover) {
-    cursor: initial;
-  }
-
-  :host(:focus-visible) {
-    box-shadow: 0 0 0 2pt ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
-  }
-
-  .thumb-cursor:focus {
-    outline: 0;
-  }
-
-  /* Thumb Container and Cursor */
-  .thumb-container {
-    position: absolute;
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    transition: all 0.2s ease;
+    touch-action: none;
+    min-width: 120px;
+    min-height: 32px;
+    grid-template-rows: 1fr var(--thumb-size) 1fr;
+    grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
   }
 
-  .thumb-container {
-    transform: translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5));
+  :host(:not(:disabled)) {
+    cursor: pointer;
   }
 
-  :host([size='small']) .thumb-container {
-    transform: translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35));
+  :host(:dir(rtl)) {
+    --slider-direction: -90deg;
   }
 
-  :host([orientation='vertical']) .thumb-container {
-    transform: translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5));
+  :host(${smallState}) {
+    --thumb-size: 16px;
+    --track-overhang: -1px;
+    --track-size: 2px;
+    --border-radius: ${borderRadiusSmall};
   }
 
-  :host([orientation='vertical'][size='small']) .thumb-container {
-    transform: translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5));
+  :host(${verticalState}) {
+    --slider-direction: 0deg;
+    --step-marker-inset: -1px var(--track-overhang);
+    min-height: 120px;
+    grid-template-rows: var(--track-margin-inline) 1fr var(--track-margin-inline);
+    grid-template-columns: 1fr var(--thumb-size) 1fr;
+    width: unset;
+    min-width: 32px;
+    justify-items: center;
   }
 
-  .thumb-cursor {
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    background-color: ${colorBrandBackground};
-    border-radius: ${borderRadiusCircular};
-    box-shadow: inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1}, 0 0 0 1px ${colorNeutralStroke1};
-  }
-  .thumb-cursor:hover {
-    background-color: ${colorCompoundBrandBackgroundHover};
-  }
-  .thumb-cursor:active {
-    background-color: ${colorCompoundBrandBackgroundPressed};
-  }
-  :host([disabled]) .thumb-cursor {
-    background-color: ${colorNeutralForegroundDisabled};
-    box-shadow: inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1}, 0 0 0 1px ${colorNeutralStrokeDisabled};
+  :host(:not([slot='input']):focus-visible) {
+    box-shadow: 0 0 0 2pt ${colorStrokeFocus2};
+    outline: 1px solid ${colorStrokeFocus1};
   }
 
-  /* Positioning Region */
-  .positioning-region {
+  .track {
     position: relative;
-    display: grid;
+    background-color: ${colorNeutralStrokeAccessible};
+    border-radius: var(--border-radius);
+    grid-row: 2 / 2;
+    grid-column: 2 / 2;
+    width: 100%;
+    height: var(--track-size);
+    forced-color-adjust: none;
   }
 
-  :host([orientation='horizontal']) .positioning-region {
-    margin: 0 8px;
-    grid-template-rows: var(--thumb-size) var(--thumb-size);
-  }
-  :host([orientation='vertical']) .positioning-region {
-    margin: 8px 0;
+  :host(${verticalState}) .track {
+    top: var(--track-overhang);
+    bottom: var(--track-overhang);
+    width: var(--track-size);
     height: 100%;
-    grid-template-columns: var(--thumb-size) var(--thumb-size);
   }
 
-  /* Track */
-  .track {
-    align-self: start;
+  .track::before {
+    content: '';
     position: absolute;
-    background-color: ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusMedium};
-    overflow: hidden;
+    height: 100%;
+    border-radius: inherit;
+    inset-inline-start: 0;
+    width: var(--slider-progress);
+  }
+
+  :host(${verticalState}) .track::before {
+    width: 100%;
+    bottom: 0;
+    height: var(--slider-progress);
   }
 
   :host([step]) .track::after {
     content: '';
     position: absolute;
-    border-radius: ${borderRadiusMedium};
-    width: 100%;
-    inset: 0 2px;
+    border-radius: inherit;
+    inset: var(--step-marker-inset);
     background-image: repeating-linear-gradient(
       var(--slider-direction),
       #0000 0%,
@@ -152,52 +122,55 @@ export const styles = css`
     );
   }
 
-  :host([orientation='vertical'][step]) .track::after {
-    inset: -2px 0;
+  .thumb-container {
+    position: absolute;
+    grid-row: 2 / 2;
+    grid-column: 2 / 2;
+    transform: translateX(-50%);
+    left: var(--slider-thumb);
   }
 
-  :host([disabled]) .track {
-    background-color: ${colorNeutralBackgroundDisabled};
+  :host(${verticalState}) .thumb-container {
+    transform: translateY(50%);
+    left: unset;
+    bottom: var(--slider-thumb);
   }
 
-  :host([orientation='horizontal']) .track {
-    right: var(--track-overhang);
-    left: var(--track-overhang);
-    align-self: start;
-    height: var(--track-width);
-    grid-row: 2 / auto;
+  :host(:not(:active)) :is(.thumb-container, .track::before) {
+    transition: all 0.2s ease;
   }
 
-  :host([orientation='vertical']) .track {
-    top: var(--track-overhang);
-    bottom: var(--track-overhang);
-    width: var(--track-width);
-    height: 100%;
-    grid-column: 2 / auto;
+  .thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: ${borderRadiusCircular};
+    box-shadow: 0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;
+    border: calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};
+    box-sizing: border-box;
   }
-  .track-start {
+
+  .thumb,
+  .track::before {
     background-color: ${colorCompoundBrandBackground};
-    position: absolute;
-    height: 100%;
-    left: 0;
-    border-radius: ${borderRadiusMedium};
   }
-  :host([disabled]) .track-start {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-  :host(:hover) .track-start {
+
+  :host(:hover) .thumb,
+  :host(:hover) .track::before {
     background-color: ${colorCompoundBrandBackgroundHover};
   }
-  :host([disabled]:hover) .track-start {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-  .track-start:active {
+
+  :host(:active) .thumb,
+  :host(:active) .track::before {
     background-color: ${colorCompoundBrandBackgroundPressed};
   }
-  :host([orientation='vertical']) .track-start {
-    height: auto;
-    width: 100%;
-    bottom: 0;
+
+  :host(:disabled) .track {
+    background-color: ${colorNeutralBackgroundDisabled};
+  }
+
+  :host(:disabled) .thumb,
+  :host(:disabled) .track::before {
+    background-color: ${colorNeutralForegroundDisabled};
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
@@ -206,15 +179,15 @@ export const styles = css`
     .track {
       background: WindowText;
     }
-    .thumb-cursor:hover,
-    .thumb-cursor:active,
-    .thumb-cursor {
+    .thumb:hover,
+    .thumb:active,
+    .thumb {
       background: ButtonText;
     }
 
-    :host(:hover) .track-start,
-    .track-start:active,
-    .track-start {
+    :host(:hover) .track::before,
+    :host(:active) .track::before,
+    .track::before {
       background: Highlight;
     }
   `),
diff --git a/packages/web-components/src/slider/slider.template.ts b/packages/web-components/src/slider/slider.template.ts
index 84397afb461e8..33c09278eac87 100644
--- a/packages/web-components/src/slider/slider.template.ts
+++ b/packages/web-components/src/slider/slider.template.ts
@@ -1,46 +1,29 @@
 import { html, ref } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
 import { staticallyCompose } from '../utils/template-helpers.js';
-import { SliderOptions } from './slider.options.js';
-import { Slider } from './slider.js';
+import type { SliderOptions } from './slider.options.js';
+import type { Slider } from './slider.js';
 
 export function sliderTemplate<T extends Slider>(options: SliderOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template
-      role="slider"
       tabindex="${x => (x.disabled ? null : 0)}"
-      aria-valuetext="${x => x.valueTextFormatter(x.value)}"
-      aria-valuenow="${x => x.value}"
-      aria-valuemin="${x => x.min}"
-      aria-valuemax="${x => x.max}"
-      aria-disabled="${x => (x.disabled ? true : void 0)}"
-      aria-readonly="${x => (x.readOnly ? true : void 0)}"
-      aria-orientation="${x => x.orientation}"
-      class="${x => x.orientation}"
+      @pointerdown="${(x, c) => x.handlePointerDown(c.event as PointerEvent)}"
     >
-      <div part="positioning-region" class="positioning-region">
-        <div ${ref('track')} part="track-container" class="track">
-          <slot name="track"></slot>
-          <div part="track-start" class="track-start" style="${x => x.position}">
-            <slot name="track-start"></slot>
-          </div>
-        </div>
-        <slot></slot>
-        <div
-          ${ref('thumb')}
-          part="thumb-container"
-          class="thumb-container"
-          style="${x => x.position}"
-          @mousedown="${(x, c) => x.handleThumbMouseDown(c.event as MouseEvent)}"
-          @touchstart="${(x, c) => x.handleThumbMouseDown(c.event as MouseEvent)}"
-        >
-          <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
-        </div>
+      <div ${ref('track')} part="track-container" class="track" style="${x => x.position}"></div>
+      <div
+        ${ref('thumb')}
+        part="thumb-container"
+        class="thumb-container"
+        style="${x => x.position}"
+        @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event as PointerEvent)}"
+      >
+        <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
       </div>
     </template>
   `;
 }
 
 export const template: ElementViewTemplate<Slider> = sliderTemplate({
-  thumb: `<div class="thumb-cursor"></div>`,
+  thumb: `<div class="thumb"></div>`,
 });
diff --git a/packages/web-components/src/slider/slider.ts b/packages/web-components/src/slider/slider.ts
index d9b8e2c64ce2b..56804727aec2d 100644
--- a/packages/web-components/src/slider/slider.ts
+++ b/packages/web-components/src/slider/slider.ts
@@ -1,4 +1,4 @@
-import { attr, css, nullableNumberConverter, observable, Observable } from '@microsoft/fast-element';
+import { attr, css, FASTElement, observable, Observable } from '@microsoft/fast-element';
 import type { ElementStyles } from '@microsoft/fast-element';
 import {
   Direction,
@@ -11,16 +11,47 @@ import {
   limit,
   Orientation,
 } from '@microsoft/fast-web-utilities';
-import { getDirection } from '../utils/index.js';
-import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
-import { FormAssociatedSlider } from './slider.form-associated.js';
+import { numberLikeStringConverter } from '../utils/converters.js';
+import { getDirection } from '../utils/direction.js';
+import { toggleState } from '../utils/element-internals.js';
+import { SliderConfiguration, SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
 import { convertPixelToPercent } from './slider-utilities.js';
 
 /**
  * The base class used for constructing a fluent-slider custom element
+ *
+ * @slot thumb - The slot for a custom thumb element.
+ * @csspart thumb-container - The container element of the thumb.
+ * @csspart track-container - The container element of the track.
+ * @fire change - Fires a custom 'change' event when the value changes.
+ *
  * @public
  */
-export class Slider extends FormAssociatedSlider implements SliderConfiguration {
+export class Slider extends FASTElement implements SliderConfiguration {
+  /**
+   * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  public elementInternals: ElementInternals = this.attachInternals();
+
+  /**
+   * The form-associated flag.
+   * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+   *
+   * @public
+   */
+  public static formAssociated = true;
+
+  /**
+   * A reference to all associated `<label>` elements.
+   *
+   * @public
+   */
+  public get labels(): ReadonlyArray<Node> {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
+
   /**
    * The size of the slider
    * @public
@@ -29,16 +60,23 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    */
   @attr
   public size?: SliderSize;
+  protected sizeChanged(prev: string, next: string): void {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
 
-  public handleChange(source: any, propertyName: string): void {
+  public handleChange(_: any, propertyName: string): void {
     switch (propertyName) {
       case 'min':
       case 'max':
+        this.setSliderPosition(this.direction);
       case 'step':
         this.handleStepStyles();
         break;
-      default:
-        break;
     }
   }
 
@@ -50,7 +88,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    */
   private handleStepStyles(): void {
     if (this.step) {
-      const totalSteps = (100 / Math.floor((this.max - this.min) / this.step)) as any;
+      const totalSteps = (100 / Math.floor((this.maxAsNumber - this.minAsNumber) / this.stepAsNumber)) as any;
 
       if (this.stepStyles !== undefined) {
         this.$fastController.removeStyles(this.stepStyles);
@@ -59,7 +97,6 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
       this.stepStyles = css/**css*/ `
         :host {
           --step-rate: ${totalSteps}%;
-          color: blue;
         }
       `;
 
@@ -70,20 +107,187 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
   }
 
   /**
-   * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+   * The initial value of the input.
    *
    * @public
    * @remarks
-   * HTML Attribute: readonly
+   * HTML Attribute: `value`
+   */
+  @attr({ attribute: 'value', mode: 'fromView' })
+  public initialValue!: string;
+
+  /**
+   * Sets the value of the input when the value attribute changes.
+   *
+   * @param prev - The previous value
+   * @param next - The current value
+   * @internal
    */
-  @attr({ attribute: 'readonly', mode: 'boolean' })
-  public readOnly!: boolean; // Map to proxy element
-  protected readOnlyChanged(): void {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
+  protected initialValueChanged(_: string, next: string): void {
+    if (this.$fastController.isConnected) {
+      this.value = next;
+    } else {
+      this._value = next;
     }
   }
 
+  /**
+   * The element's validity state.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+   */
+  public get validity(): ValidityState {
+    return this.elementInternals.validity;
+  }
+
+  /**
+   * The element's validation message.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage | `ElemenentInternals.validationMessage`} property.
+   */
+  public get validationMessage(): string {
+    return this.elementInternals.validationMessage;
+  }
+
+  /**
+   * Whether the element is a candidate for its owning form's constraint validation.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate | `ElemenentInternals.willValidate`} property.
+   */
+  public get willValidate() {
+    return this.elementInternals.willValidate;
+  }
+
+  /**
+   * Checks the element's validity.
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity | `ElemenentInternals.checkValidity`} method.
+   */
+  public checkValidity() {
+    return this.elementInternals.checkValidity();
+  }
+
+  /**
+   * Reports the element's validity.
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity | `ElemenentInternals.reportValidity`} method.
+   */
+  public reportValidity() {
+    return this.elementInternals.reportValidity();
+  }
+
+  /**
+   * Sets a custom validity message.
+   * @public
+   */
+  public setCustomValidity(message: string) {
+    this.setValidity({ customError: !!message }, message);
+  }
+
+  /**
+   * Sets the validity of the control.
+   *
+   * @param flags - Validity flags to set.
+   * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+   * @param anchor - Optional anchor to use for the validation message.
+   *
+   * @internal
+   */
+  public setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void {
+    if (this.$fastController.isConnected) {
+      if (this.disabled) {
+        this.elementInternals.setValidity({});
+        return;
+      }
+
+      this.elementInternals.setValidity(
+        { customError: !!message, ...flags },
+        message ?? this.validationMessage,
+        anchor,
+      );
+    }
+  }
+
+  /**
+   * The internal value of the input.
+   *
+   * @internal
+   */
+  private _value!: string;
+
+  /**
+   * The current value of the input.
+   *
+   * @public
+   */
+  public get value(): string {
+    Observable.track(this, 'value');
+    return this._value.toString();
+  }
+
+  public set value(value: string) {
+    if (!this.$fastController.isConnected) {
+      this._value = value.toString();
+      return;
+    }
+
+    const nextAsNumber = parseFloat(value);
+    const newValue = limit(this.minAsNumber, this.maxAsNumber, this.convertToConstrainedValue(nextAsNumber)).toString();
+
+    if (newValue !== value) {
+      this.value = newValue;
+      return;
+    }
+
+    this._value = value.toString();
+    this.elementInternals.ariaValueNow = this._value;
+    this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
+    this.setSliderPosition(this.direction);
+    this.$emit('change');
+    this.setFormValue(value);
+    Observable.notify(this, 'value');
+  }
+
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback(): void {
+    this.value = this.initialValue ?? this.midpoint;
+  }
+
+  /**
+   * Disabled the component when its associated form is disabled.
+   *
+   * @internal
+   *
+   * @privateRemarks
+   * DO NOT change the `disabled` property or attribute here, because if the
+   * `disabled` attribute is present, reenabling an ancestor `<fieldset>`
+   * element will not reenabling this component.
+   */
+  formDisabledCallback(disabled: boolean): void {
+    this.setDisabledSideEffect(disabled);
+  }
+
+  /**
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+   *
+   * @internal
+   */
+  public setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void {
+    this.elementInternals.setFormValue(value, value ?? state);
+  }
+
   /**
    * @internal
    */
@@ -153,7 +357,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    * @public
    */
   public get valueAsNumber(): number {
-    return parseFloat(super.value);
+    return parseFloat(this.value);
   }
 
   public set valueAsNumber(next: number) {
@@ -161,67 +365,92 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
   }
 
   /**
-   * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+   * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
    *
    * @public
    */
   @observable
-  public valueTextFormatter: (value: string) => string | null = () => null;
+  public valueTextFormatter: (value: string) => string = () => '';
+  protected valueTextFormatterChanged() {
+    if (typeof this.valueTextFormatter === 'function') {
+      this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
+    } else {
+      this.elementInternals.ariaValueText = '';
+    }
+  }
 
   /**
-   * @internal
+   * The element's disabled state.
+   * @public
+   * @remarks
+   * HTML Attribute: `disabled`
    */
-  public valueChanged(previous: string, next: string): void {
-    if (this.$fastController.isConnected) {
-      const nextAsNumber = parseFloat(next);
-      const value = limit(this.min, this.max, this.convertToConstrainedValue(nextAsNumber)).toString();
-
-      if (value !== next) {
-        this.value = value;
-        return;
-      }
-
-      super.valueChanged(previous, next);
-
-      this.setThumbPositionForOrientation(this.direction);
-
-      this.$emit('change');
-    }
+  @attr({ mode: 'boolean' })
+  public disabled: boolean = false;
+  protected disabledChanged(): void {
+    this.setDisabledSideEffect(this.disabled);
   }
 
   /**
    * The minimum allowed value.
    *
-   * @defaultValue - 0
    * @public
    * @remarks
    * HTML Attribute: min
    */
-  @attr({ converter: nullableNumberConverter })
-  public min: number = 0; // Map to proxy element.
+  @attr({ converter: numberLikeStringConverter })
+  public min: string = '';
   protected minChanged(): void {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.min = `${this.min}`;
+    this.elementInternals.ariaValueMin = `${this.minAsNumber}`;
+    if (this.$fastController.isConnected && this.minAsNumber > this.valueAsNumber) {
+      this.value = this.min!;
     }
+  }
 
-    this.validate();
+  /**
+   * Returns the min property or the default value
+   *
+   * @internal
+   */
+  private get minAsNumber(): number {
+    if (this.min !== undefined) {
+      const parsed = parseFloat(this.min);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+    return 0;
   }
 
   /**
    * The maximum allowed value.
    *
-   * @defaultValue - 10
    * @public
    * @remarks
    * HTML Attribute: max
    */
-  @attr({ converter: nullableNumberConverter })
-  public max: number = 10; // Map to proxy element.
+  @attr({ converter: numberLikeStringConverter })
+  public max: string = '';
   protected maxChanged(): void {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = `${this.max}`;
+    this.elementInternals.ariaValueMax = `${this.maxAsNumber}`;
+    if (this.$fastController.isConnected && this.maxAsNumber < this.valueAsNumber) {
+      this.value = this.max!;
+    }
+  }
+
+  /**
+   * Returns the max property or the default value
+   *
+   * @internal
+   */
+  private get maxAsNumber(): number {
+    if (this.max !== undefined) {
+      const parsed = parseFloat(this.max);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
     }
-    this.validate();
+    return 100;
   }
 
   /**
@@ -231,15 +460,29 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    * @remarks
    * HTML Attribute: step
    */
-  @attr({ converter: nullableNumberConverter })
-  public step: number | undefined;
+  @attr({ converter: numberLikeStringConverter })
+  public step: string = '';
   protected stepChanged(): void {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.step = `${this.step}`;
+    this.updateStepMultiplier();
+    // Update value to align with the new step if needed.
+    if (this.$fastController.isConnected) {
+      this.value = this._value;
     }
+  }
 
-    this.updateStepMultiplier();
-    this.validate();
+  /**
+   * Returns the step property as a number.
+   *
+   * @internal
+   */
+  private get stepAsNumber(): number {
+    if (this.step !== undefined) {
+      const parsed = parseFloat(this.step);
+      if (!Number.isNaN(parsed) && parsed > 0) {
+        return parsed;
+      }
+    }
+    return 1;
   }
 
   /**
@@ -248,12 +491,28 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    * @public
    * @remarks
    * HTML Attribute: orientation
+   *
+   * @privateRemarks
+   * When checking the value of `this.orientation`, always compare it to
+   * `Orientation.vertical`, never to `Orientation.horizontal`, it’s because
+   * this property is optional, so it could be `undefined`. So any
+   * orientation-related behavior should consider horizontal as default, and
+   * apply different behavior when it’s vertical.
    */
   @attr
-  public orientation: Orientation = Orientation.horizontal;
-  protected orientationChanged(): void {
+  public orientation?: Orientation;
+  protected orientationChanged(prev: string | undefined, next: string | undefined): void {
+    this.elementInternals.ariaOrientation = next ?? Orientation.horizontal;
+
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+
     if (this.$fastController.isConnected) {
-      this.setThumbPositionForOrientation(this.direction);
+      this.setSliderPosition(this.direction);
     }
   }
 
@@ -267,20 +526,27 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
   @attr
   public mode: SliderMode = SliderMode.singleValue;
 
+  constructor() {
+    super();
+
+    this.elementInternals.role = 'slider';
+    this.elementInternals.ariaOrientation = this.orientation ?? SliderOrientation.horizontal;
+  }
+
   /**
    * @internal
    */
   public connectedCallback(): void {
     super.connectedCallback();
 
-    this.proxy.setAttribute('type', 'range');
-
     this.direction = getDirection(this);
+
+    this.setDisabledSideEffect(this.disabled);
     this.updateStepMultiplier();
     this.setupTrackConstraints();
     this.setupListeners();
     this.setupDefaultValue();
-    this.setThumbPositionForOrientation(this.direction);
+    this.setSliderPosition(this.direction);
 
     Observable.getNotifier(this).subscribe(this, 'max');
     Observable.getNotifier(this).subscribe(this, 'min');
@@ -309,11 +575,12 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    */
   public increment(): void {
     const newVal: number =
-      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-        ? Number(this.value) + Number(this.stepValue)
-        : Number(this.value) + Number(this.stepValue);
+      this.direction !== Direction.rtl
+        ? Number(this.value) + this.stepAsNumber
+        : Number(this.value) - this.stepAsNumber;
     const incrementedVal: number = this.convertToConstrainedValue(newVal);
-    const incrementedValString: string = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+    const incrementedValString: string =
+      incrementedVal < this.maxAsNumber ? `${incrementedVal}` : `${this.maxAsNumber}`;
     this.value = incrementedValString;
   }
 
@@ -324,71 +591,66 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    */
   public decrement(): void {
     const newVal =
-      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-        ? Number(this.value) - Number(this.stepValue)
-        : Number(this.value) - Number(this.stepValue);
+      this.direction !== Direction.rtl
+        ? Number(this.value) - Number(this.stepAsNumber)
+        : Number(this.value) + Number(this.stepAsNumber);
     const decrementedVal: number = this.convertToConstrainedValue(newVal);
-    const decrementedValString: string = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+    const decrementedValString: string =
+      decrementedVal > this.minAsNumber ? `${decrementedVal}` : `${this.minAsNumber}`;
     this.value = decrementedValString;
   }
 
-  public keypressHandler = (e: KeyboardEvent): void => {
-    if (this.readOnly || this.disabled) {
+  public keypressHandler = (event: KeyboardEvent): void => {
+    if (this.disabled) {
       return;
     }
 
-    if (e.key === keyHome) {
-      e.preventDefault();
-      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-        ? (this.value = `${this.min}`)
-        : (this.value = `${this.max}`);
-    } else if (e.key === keyEnd) {
-      e.preventDefault();
-      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-        ? (this.value = `${this.max}`)
-        : (this.value = `${this.min}`);
-    } else if (!e.shiftKey) {
-      switch (e.key) {
-        case keyArrowRight:
-        case keyArrowUp:
-          e.preventDefault();
+    switch (event.key) {
+      case keyHome:
+        event.preventDefault();
+        this.value =
+          this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+            ? `${this.minAsNumber}`
+            : `${this.maxAsNumber}`;
+        break;
+      case keyEnd:
+        event.preventDefault();
+        this.value =
+          this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+            ? `${this.maxAsNumber}`
+            : `${this.minAsNumber}`;
+        break;
+      case keyArrowRight:
+      case keyArrowUp:
+        if (!event.shiftKey) {
+          event.preventDefault();
           this.increment();
-          break;
-        case keyArrowLeft:
-        case keyArrowDown:
-          e.preventDefault();
+        }
+        break;
+      case keyArrowLeft:
+      case keyArrowDown:
+        if (!event.shiftKey) {
+          event.preventDefault();
           this.decrement();
-          break;
-      }
+        }
+        break;
     }
   };
 
-  /**
-   * Gets the actual step value for the slider
-   *
-   */
-  private get stepValue(): number {
-    return this.step === undefined ? 1 : this.step;
-  }
-
   /**
    * Places the thumb based on the current value
    *
-   * @public
    * @param direction - writing mode
    */
-  private setThumbPositionForOrientation(direction: Direction): void {
-    const newPct: number = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
+  private setSliderPosition(direction: Direction): void {
+    const newPct: number = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, direction);
     const percentage: number = (1 - newPct) * 100;
-    if (this.orientation === Orientation.horizontal) {
-      this.position = this.isDragging
-        ? `right: ${percentage}%; transition: none;`
-        : `right: ${percentage}%; transition: all 0.2s ease;`;
-    } else {
-      this.position = this.isDragging
-        ? `top: ${percentage}%; transition: none;`
-        : `top: ${percentage}%; transition: all 0.2s ease;`;
-    }
+    const thumbPosition = `calc(100% - ${percentage}%)`;
+    const trackProgress =
+      !(this.orientation === Orientation.vertical) && direction === Direction.rtl
+        ? `${percentage}%`
+        : `calc(100% - ${percentage}%)`;
+    this.position = `--slider-thumb: ${thumbPosition}; --slider-progress: ${trackProgress}`;
   }
 
   /**
@@ -396,8 +658,8 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
    * are not whole numbers
    */
   private updateStepMultiplier(): void {
-    const stepString: string = this.stepValue + '';
-    const decimalPlacesOfStep: number = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf('.') - 1 : 0;
+    const stepString: string = this.stepAsNumber + '';
+    const decimalPlacesOfStep: number = !!(this.stepAsNumber % 1) ? stepString.length - stepString.indexOf('.') - 1 : 0;
     this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
   }
 
@@ -413,67 +675,61 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     }
   };
 
-  //Remove
   private setupListeners = (remove: boolean = false): void => {
     //TODO Bug: https://github.com/microsoft/fluentui/issues/30087
     this.addEventListener('keydown', this.keypressHandler);
-    this.addEventListener('mousedown', this.handleMouseDown);
-    // removes handlers attached by mousedown handlers
+
     if (remove) {
       this.removeEventListener('keydown', this.keypressHandler);
-      this.removeEventListener('mousedown', this.handleMouseDown);
     }
   };
 
-  /**
-   * @internal
-   */
-  public initialValue: string = '';
-
   private get midpoint(): string {
-    return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
+    return `${this.convertToConstrainedValue((this.maxAsNumber + this.minAsNumber) / 2)}`;
   }
 
   private setupDefaultValue(): void {
-    if (typeof this.value === 'string') {
-      if (this.value.length === 0) {
-        this.initialValue = this.midpoint;
-      } else {
-        const value = parseFloat(this.value);
-
-        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
-          this.value = this.midpoint;
-        }
-      }
+    if (!this._value) {
+      this.value = this.initialValue ?? this.midpoint;
+    }
+
+    if (
+      !Number.isNaN(this.valueAsNumber) &&
+      (this.valueAsNumber < this.minAsNumber || this.valueAsNumber > this.maxAsNumber)
+    ) {
+      this.value = this.midpoint;
     }
+
+    this.elementInternals.ariaValueNow = this.value;
   }
 
   /**
    *  Handle mouse moves during a thumb drag operation
    *  If the event handler is null it removes the events
    */
-  public handleThumbMouseDown = (event: MouseEvent | null): void => {
+  public handleThumbPointerDown = (event: PointerEvent | null): void => {
     const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
-    windowFn('mouseup', this.handleWindowMouseUp);
-    windowFn('mousemove', this.handleMouseMove, { passive: true });
-    windowFn('touchmove', this.handleMouseMove, { passive: true });
-    windowFn('touchend', this.handleWindowMouseUp);
+    windowFn('pointerup', this.handleWindowPointerUp);
+    windowFn('pointermove', this.handlePointerMove, { passive: true });
+    windowFn('touchmove', this.handlePointerMove, { passive: true });
+    windowFn('touchend', this.handleWindowPointerUp);
     this.isDragging = event !== null;
   };
 
   /**
    *  Handle mouse moves during a thumb drag operation
    */
-  private handleMouseMove = (e: MouseEvent | TouchEvent | Event): void => {
-    if (this.readOnly || this.disabled || e.defaultPrevented) {
+  private handlePointerMove = (event: PointerEvent | TouchEvent | Event): void => {
+    if (this.disabled || event.defaultPrevented) {
       return;
     }
+
     // update the value based on current position
-    const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : (e as MouseEvent);
+    const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : (event as PointerEvent);
     const eventValue: number =
-      this.orientation === Orientation.horizontal
-        ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
-        : sourceEvent.pageY - document.documentElement.scrollTop;
+      this.orientation === Orientation.vertical
+        ? sourceEvent.pageY - document.documentElement.scrollTop
+        : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft;
 
     this.value = `${this.calculateNewValue(eventValue)}`;
   };
@@ -492,45 +748,45 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     // update the value based on current position
     const newPosition = convertPixelToPercent(
       rawValue,
-      this.orientation === Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight,
-      this.orientation === Orientation.horizontal ? this.trackWidth : this.trackHeight,
+      this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth,
+      this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth,
       this.direction,
     );
-    const newValue: number = (this.max - this.min) * newPosition + this.min;
+    const newValue: number = (this.maxAsNumber - this.minAsNumber) * newPosition + this.minAsNumber;
     return this.convertToConstrainedValue(newValue);
   }
 
   /**
    * Handle a window mouse up during a drag operation
    */
-  private handleWindowMouseUp = (event: Event): void => {
+  private handleWindowPointerUp = (): void => {
     this.stopDragging();
   };
 
   private stopDragging = (): void => {
     this.isDragging = false;
-    this.handleMouseDown(null);
-    this.handleThumbMouseDown(null);
+    this.handlePointerDown(null);
+    this.handleThumbPointerDown(null);
   };
 
   /**
    *
-   * @param e - MouseEvent or null. If there is no event handler it will remove the events
+   * @param event - PointerEvent or null. If there is no event handler it will remove the events
    */
-  public handleMouseDown = (e: MouseEvent | null) => {
-    if (e === null || (!this.disabled && !this.readOnly)) {
-      const windowFn = e !== null ? window.addEventListener : window.removeEventListener;
-      const documentFn = e !== null ? document.addEventListener : document.removeEventListener;
-      windowFn('mouseup', this.handleWindowMouseUp);
-      documentFn('mouseleave', this.handleWindowMouseUp);
-      windowFn('mousemove', this.handleMouseMove);
+  public handlePointerDown = (event: PointerEvent | null) => {
+    if (event === null || !this.disabled) {
+      const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
+      const documentFn = event !== null ? document.addEventListener : document.removeEventListener;
+      windowFn('pointerup', this.handleWindowPointerUp);
+      documentFn('mouseleave', this.handleWindowPointerUp);
+      windowFn('pointermove', this.handlePointerMove);
 
-      if (e) {
+      if (event) {
         this.setupTrackConstraints();
         const controlValue: number =
-          this.orientation === Orientation.horizontal
-            ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
-            : e.pageY - document.documentElement.scrollTop;
+          this.orientation === Orientation.vertical
+            ? event.pageY - document.documentElement.scrollTop
+            : event.pageX - document.documentElement.scrollLeft - this.trackLeft;
 
         this.value = `${this.calculateNewValue(controlValue)}`;
       }
@@ -539,7 +795,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
 
   private convertToConstrainedValue(value: number): number {
     if (isNaN(value)) {
-      value = this.min;
+      value = this.minAsNumber;
     }
 
     /**
@@ -548,15 +804,26 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
      * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
      * integer and then dividing it to get back to the correct number.
      */
-    let constrainedValue: number = value - this.min;
-    const roundedConstrainedValue: number = Math.round(constrainedValue / this.stepValue);
+    let constrainedValue: number = value - this.minAsNumber;
+    const roundedConstrainedValue: number = Math.round(constrainedValue / this.stepAsNumber);
     const remainderValue: number =
-      constrainedValue - (roundedConstrainedValue * (this.stepMultiplier * this.stepValue)) / this.stepMultiplier;
+      constrainedValue - (roundedConstrainedValue * (this.stepMultiplier * this.stepAsNumber)) / this.stepMultiplier;
 
     constrainedValue =
-      remainderValue >= Number(this.stepValue) / 2
-        ? constrainedValue - remainderValue + Number(this.stepValue)
+      remainderValue >= Number(this.stepAsNumber) / 2
+        ? constrainedValue - remainderValue + Number(this.stepAsNumber)
         : constrainedValue - remainderValue;
-    return constrainedValue + this.min;
+    return constrainedValue + this.minAsNumber;
+  }
+
+  /**
+   * Makes sure the side effects of set up when the disabled state changes.
+   */
+  private setDisabledSideEffect(disabled: boolean) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    this.elementInternals.ariaDisabled = disabled.toString();
+    this.tabIndex = disabled ? -1 : 0;
   }
 }
diff --git a/packages/web-components/src/styles/states/index.ts b/packages/web-components/src/styles/states/index.ts
index db9226195159a..fde2fe9986988 100644
--- a/packages/web-components/src/styles/states/index.ts
+++ b/packages/web-components/src/styles/states/index.ts
@@ -114,6 +114,12 @@ export const extraSmallState = css.partial`:is([state--extra-small], :state(extr
  */
 export const smallState = css.partial`:is([state--small], :state(small))`;
 
+/**
+ * Selector for the `medium` state.
+ * @public
+ */
+export const mediumState = css.partial`:is([state--medium], :state(medium))`;
+
 /**
  * Selector for the `large` state.
  * @public
diff --git a/packages/web-components/src/utils/converters.ts b/packages/web-components/src/utils/converters.ts
new file mode 100644
index 0000000000000..5f836f66ba4b1
--- /dev/null
+++ b/packages/web-components/src/utils/converters.ts
@@ -0,0 +1,27 @@
+import type { ValueConverter } from '@microsoft/fast-element';
+
+/**
+ * A {@link ValueConverter} that makes sure the attribute and property values
+ * are a string representation of a number, e.g. `'10'` instead of `10`.
+ *
+ * @remarks
+ * This converter allows any data type, but if the data is evaluated as `NaN`
+ * by `Number.isNaN()`, it’d be converted to an empty string. Otherwise, the
+ * converted value is a string of number.
+ *
+ * It is useful for somm  custom element’s attributes and properties, e.g.
+ * `min`, `max`, `step` on an `<input type=range>`-like element, to align with
+ * the built-in HTML element behavior, those property values should be strings.
+ *
+ * @public
+ */
+export const numberLikeStringConverter: ValueConverter = {
+  fromView(value: string): string {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? '' : valueAsNumber.toString();
+  },
+  toView(value: any): string | undefined {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? undefined : valueAsNumber.toString();
+  },
+};
diff --git a/packages/web-components/src/utils/index.ts b/packages/web-components/src/utils/index.ts
index 1c85c7ab89b4e..f4dbad92d2750 100644
--- a/packages/web-components/src/utils/index.ts
+++ b/packages/web-components/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './converters.js';
 export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';