@fluentui/web-components 3.0.0-beta.11 → 3.0.0-beta.110

package/dist/esm/slider/slider.js

@@ -1,22 +1,314 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, css, nullableNumberConverter, observable, Observable } from '@microsoft/fast-element';
+import { __decorate } from "tslib";
+import { attr, css, FASTElement, observable, Observable } from '@microsoft/fast-element';
 import { Direction, keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyHome, limit, Orientation, } from '@microsoft/fast-web-utilities';
-import { getDirection } from '../utils/index.js';
-import { SliderMode } from './slider.options.js';
-import { FormAssociatedSlider } from './slider.form-associated.js';
+import { numberLikeStringConverter } from '../utils/converters.js';
+import { getDirection } from '../utils/direction.js';
+import { SliderMode, SliderOrientation } from './slider.options.js';
 import { convertPixelToPercent } from './slider-utilities.js';
 /**
  * The base class used for constructing a fluent-slider custom element
+ *
+ * @tag fluent-slider
+ *
+ * @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.
+ * @fires change - Fires a custom 'change' event when the value changes.
+ *
  * @public
  */
-export class Slider extends FormAssociatedSlider {
+export class Slider extends FASTElement {
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static { this.formAssociated = true; }
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels() {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+    }
+    handleChange(_, propertyName) {
+        switch (propertyName) {
+            case 'min':
+            case 'max':
+                this.setSliderPosition();
+            case 'step':
+                this.handleStepStyles();
+                break;
+        }
+    }
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    handleStepStyles() {
+        if (this.step) {
+            const totalSteps = (100 / Math.floor((this.maxAsNumber - this.minAsNumber) / this.stepAsNumber));
+            if (this.stepStyles !== undefined) {
+                this.$fastController.removeStyles(this.stepStyles);
+            }
+            this.stepStyles = css /**css*/ `
+        :host {
+          --step-rate: ${totalSteps}%;
+        }
+      `;
+            this.$fastController.addStyles(this.stepStyles);
+        }
+        else if (this.stepStyles !== undefined) {
+            this.$fastController.removeStyles(this.stepStyles);
+        }
+    }
+    /**
+     * Sets the value of the input when the value attribute changes.
+     *
+     * @param prev - The previous value
+     * @param next - The current value
+     * @internal
+     */
+    initialValueChanged(_, next) {
+        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.
+     */
+    get validity() {
+        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.
+     */
+    get validationMessage() {
+        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.
+     */
+    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.
+     */
+    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.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
+    /**
+     * Sets a custom validity message.
+     * @public
+     */
+    setCustomValidity(message) {
+        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
+     */
+    setValidity(flags, message, anchor) {
+        if (this.$fastController.isConnected) {
+            if (this.disabled) {
+                this.elementInternals.setValidity({});
+                return;
+            }
+            this.elementInternals.setValidity({ customError: !!message, ...flags }, message ?? this.validationMessage, anchor);
+        }
+    }
+    /**
+     * The current value of the input.
+     *
+     * @public
+     */
+    get value() {
+        Observable.track(this, 'value');
+        return this._value?.toString() ?? '';
+    }
+    set value(value) {
+        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.$emit('change');
+        this.setFormValue(value);
+        Observable.notify(this, 'value');
+    }
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        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) {
+        this.setDisabledSideEffect(disabled);
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        this.elementInternals.setFormValue(value, value ?? state);
+    }
+    directionChanged() {
+        this.setSliderPosition();
+    }
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber() {
+        return parseFloat(this.value);
+    }
+    set valueAsNumber(next) {
+        this.value = next.toString();
+    }
+    valueTextFormatterChanged() {
+        if (typeof this.valueTextFormatter === 'function') {
+            this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
+        }
+        else {
+            this.elementInternals.ariaValueText = '';
+        }
+    }
+    disabledChanged() {
+        this.setDisabledSideEffect(this.disabled);
+    }
+    minChanged() {
+        this.elementInternals.ariaValueMin = `${this.minAsNumber}`;
+        if (this.$fastController.isConnected && this.minAsNumber > this.valueAsNumber) {
+            this.value = this.min;
+        }
+    }
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    get minAsNumber() {
+        if (this.min !== undefined) {
+            const parsed = parseFloat(this.min);
+            if (!Number.isNaN(parsed)) {
+                return parsed;
+            }
+        }
+        return 0;
+    }
+    maxChanged() {
+        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
+     */
+    get maxAsNumber() {
+        if (this.max !== undefined) {
+            const parsed = parseFloat(this.max);
+            if (!Number.isNaN(parsed)) {
+                return parsed;
+            }
+        }
+        return 100;
+    }
+    stepChanged() {
+        this.updateStepMultiplier();
+        // Update value to align with the new step if needed.
+        if (this.$fastController.isConnected) {
+            this.value = this._value;
+        }
+    }
+    /**
+     * Returns the step property as a number.
+     *
+     * @internal
+     */
+    get stepAsNumber() {
+        if (this.step !== undefined) {
+            const parsed = parseFloat(this.step);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return parsed;
+            }
+        }
+        return 1;
+    }
+    orientationChanged(prev, next) {
+        this.elementInternals.ariaOrientation = next ?? Orientation.horizontal;
+        if (this.$fastController.isConnected) {
+            this.setSliderPosition();
+        }
+    }
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
         /**
          * @internal
          */
@@ -46,37 +338,42 @@ export class Slider extends FormAssociatedSlider {
          */
         this.trackMinHeight = 0;
         /**
-         * 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
          */
-        this.valueTextFormatter = () => null;
+        this.valueTextFormatter = () => '';
+        /**
+         * The element's disabled state.
+         * @public
+         * @remarks
+         * HTML Attribute: `disabled`
+         */
+        this.disabled = false;
         /**
          * The minimum allowed value.
          *
-         * @defaultValue - 0
          * @public
          * @remarks
          * HTML Attribute: min
          */
-        this.min = 0; // Map to proxy element.
+        this.min = '';
         /**
          * The maximum allowed value.
          *
-         * @defaultValue - 10
          * @public
          * @remarks
          * HTML Attribute: max
          */
-        this.max = 10; // Map to proxy element.
+        this.max = '';
         /**
-         * The orientation of the slider.
+         * Value to increment or decrement via arrow keys, mouse click or drag.
          *
          * @public
          * @remarks
-         * HTML Attribute: orientation
+         * HTML Attribute: step
          */
-        this.orientation = Orientation.horizontal;
+        this.step = '';
         /**
          * The selection mode.
          *
@@ -85,37 +382,6 @@ export class Slider extends FormAssociatedSlider {
          * HTML Attribute: mode
          */
         this.mode = SliderMode.singleValue;
-        this.keypressHandler = (e) => {
-            if (this.readOnly || 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();
-                        this.increment();
-                        break;
-                    case keyArrowLeft:
-                    case keyArrowDown:
-                        e.preventDefault();
-                        this.decrement();
-                        break;
-                }
-            }
-        };
         this.setupTrackConstraints = () => {
             const clientRect = this.track.getBoundingClientRect();
             this.trackWidth = this.track.clientWidth;
@@ -127,180 +393,81 @@ export class Slider extends FormAssociatedSlider {
                 this.trackWidth = 1;
             }
         };
-        //Remove
-        this.setupListeners = (remove = false) => {
-            //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
-         */
-        this.initialValue = '';
         /**
          *  Handle mouse moves during a thumb drag operation
          *  If the event handler is null it removes the events
          */
-        this.handleThumbMouseDown = (event) => {
+        this.handleThumbPointerDown = (event) => {
             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;
+            return true;
         };
         /**
          *  Handle mouse moves during a thumb drag operation
          */
-        this.handleMouseMove = (e) => {
-            if (this.readOnly || this.disabled || e.defaultPrevented) {
+        this.handlePointerMove = (event) => {
+            if (this.disabled || event.defaultPrevented) {
                 return;
             }
             // update the value based on current position
-            const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : e;
-            const eventValue = this.orientation === Orientation.horizontal
-                ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
-                : sourceEvent.pageY - document.documentElement.scrollTop;
+            const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : event;
+            const thumbWidth = this.thumb.getBoundingClientRect().width;
+            const eventValue = this.orientation === Orientation.vertical
+                ? sourceEvent.pageY - document.documentElement.scrollTop
+                : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
             this.value = `${this.calculateNewValue(eventValue)}`;
         };
         /**
          * Handle a window mouse up during a drag operation
          */
-        this.handleWindowMouseUp = (event) => {
+        this.handleWindowPointerUp = () => {
             this.stopDragging();
         };
         this.stopDragging = () => {
             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
          */
-        this.handleMouseDown = (e) => {
-            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);
-                if (e) {
+        this.handlePointerDown = (event) => {
+            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);
+                const thumbWidth = this.thumb.getBoundingClientRect().width;
+                if (event) {
                     this.setupTrackConstraints();
-                    const controlValue = this.orientation === Orientation.horizontal
-                        ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
-                        : e.pageY - document.documentElement.scrollTop;
+                    const controlValue = this.orientation === Orientation.vertical
+                        ? event.pageY - document.documentElement.scrollTop
+                        : event.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
                     this.value = `${this.calculateNewValue(controlValue)}`;
                 }
             }
+            return true;
         };
-    }
-    handleChange(source, propertyName) {
-        switch (propertyName) {
-            case 'min':
-            case 'max':
-            case 'step':
-                this.handleStepStyles();
-                break;
-            default:
-                break;
-        }
-    }
-    /**
-     * Handles changes to step styling based on the step value
-     * NOTE: This function is not a changed callback, stepStyles is not observable
-     */
-    handleStepStyles() {
-        if (this.step) {
-            const totalSteps = (100 / Math.floor((this.max - this.min) / this.step));
-            if (this.stepStyles !== undefined) {
-                this.$fastController.removeStyles(this.stepStyles);
-            }
-            this.stepStyles = css /**css*/ `
-        :host {
-          --step-rate: ${totalSteps}%;
-          color: blue;
-        }
-      `;
-            this.$fastController.addStyles(this.stepStyles);
-        }
-        else if (this.stepStyles !== undefined) {
-            this.$fastController.removeStyles(this.stepStyles);
-        }
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    /**
-     * The value property, typed as a number.
-     *
-     * @public
-     */
-    get valueAsNumber() {
-        return parseFloat(super.value);
-    }
-    set valueAsNumber(next) {
-        this.value = next.toString();
-    }
-    /**
-     * @internal
-     */
-    valueChanged(previous, next) {
-        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');
-        }
-    }
-    minChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.min = `${this.min}`;
-        }
-        this.validate();
-    }
-    maxChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.max = `${this.max}`;
-        }
-        this.validate();
-    }
-    stepChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.step = `${this.step}`;
-        }
-        this.updateStepMultiplier();
-        this.validate();
-    }
-    orientationChanged() {
-        if (this.$fastController.isConnected) {
-            this.setThumbPositionForOrientation(this.direction);
-        }
+        this.elementInternals.role = 'slider';
+        this.elementInternals.ariaOrientation = this.orientation ?? SliderOrientation.horizontal;
     }
     /**
      * @internal
      */
     connectedCallback() {
         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();
         Observable.getNotifier(this).subscribe(this, 'max');
         Observable.getNotifier(this).subscribe(this, 'min');
         Observable.getNotifier(this).subscribe(this, 'step');
@@ -311,7 +478,6 @@ export class Slider extends FormAssociatedSlider {
      */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.setupListeners(true);
         Observable.getNotifier(this).unsubscribe(this, 'max');
         Observable.getNotifier(this).unsubscribe(this, 'min');
         Observable.getNotifier(this).unsubscribe(this, 'step');
@@ -322,11 +488,11 @@ export class Slider extends FormAssociatedSlider {
      * @public
      */
     increment() {
-        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-            ? Number(this.value) + Number(this.stepValue)
-            : Number(this.value) + Number(this.stepValue);
+        const newVal = this.direction !== Direction.rtl
+            ? Number(this.value) + this.stepAsNumber
+            : Number(this.value) - this.stepAsNumber;
         const incrementedVal = this.convertToConstrainedValue(newVal);
-        const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+        const incrementedValString = incrementedVal < this.maxAsNumber ? `${incrementedVal}` : `${this.maxAsNumber}`;
         this.value = incrementedValString;
     }
     /**
@@ -335,64 +501,78 @@ export class Slider extends FormAssociatedSlider {
      * @public
      */
     decrement() {
-        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
-            ? Number(this.value) - Number(this.stepValue)
-            : Number(this.value) - Number(this.stepValue);
+        const newVal = this.direction !== Direction.rtl
+            ? Number(this.value) - Number(this.stepAsNumber)
+            : Number(this.value) + Number(this.stepAsNumber);
         const decrementedVal = this.convertToConstrainedValue(newVal);
-        const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+        const decrementedValString = decrementedVal > this.minAsNumber ? `${decrementedVal}` : `${this.minAsNumber}`;
         this.value = decrementedValString;
     }
-    /**
-     * Gets the actual step value for the slider
-     *
-     */
-    get stepValue() {
-        return this.step === undefined ? 1 : this.step;
+    handleKeydown(event) {
+        if (this.disabled) {
+            return true;
+        }
+        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:
+                if (!event.shiftKey) {
+                    event.preventDefault();
+                    this.decrement();
+                }
+                break;
+        }
+        return true;
     }
     /**
      * Places the thumb based on the current value
-     *
-     * @public
-     * @param direction - writing mode
      */
-    setThumbPositionForOrientation(direction) {
-        const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
-        const percentage = (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;`;
-        }
+    setSliderPosition() {
+        const newPct = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, this.direction);
+        const percentage = newPct * 100;
+        this.position = `--slider-thumb: ${percentage}%; --slider-progress: ${percentage}%`;
     }
     /**
      * Update the step multiplier used to ensure rounding errors from steps that
      * are not whole numbers
      */
     updateStepMultiplier() {
-        const stepString = this.stepValue + '';
-        const decimalPlacesOfStep = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf('.') - 1 : 0;
+        const stepString = this.stepAsNumber + '';
+        const decimalPlacesOfStep = !!(this.stepAsNumber % 1) ? stepString.length - stepString.indexOf('.') - 1 : 0;
         this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
     }
     get midpoint() {
-        return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
+        return `${this.convertToConstrainedValue((this.maxAsNumber + this.minAsNumber) / 2)}`;
     }
     setupDefaultValue() {
-        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;
     }
     /**
      * Calculate the new value based on the given raw pixel value.
@@ -405,13 +585,13 @@ export class Slider extends FormAssociatedSlider {
     calculateNewValue(rawValue) {
         this.setupTrackConstraints();
         // 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.direction);
-        const newValue = (this.max - this.min) * newPosition + this.min;
+        const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth, this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth, this.direction);
+        const newValue = (this.maxAsNumber - this.minAsNumber) * newPosition + this.minAsNumber;
         return this.convertToConstrainedValue(newValue);
     }
     convertToConstrainedValue(value) {
         if (isNaN(value)) {
-            value = this.min;
+            value = this.minAsNumber;
         }
         /**
          * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
@@ -419,22 +599,32 @@ export class Slider extends FormAssociatedSlider {
          * 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 = value - this.min;
-        const roundedConstrainedValue = Math.round(constrainedValue / this.stepValue);
-        const remainderValue = constrainedValue - (roundedConstrainedValue * (this.stepMultiplier * this.stepValue)) / this.stepMultiplier;
+        let constrainedValue = value - this.minAsNumber;
+        const roundedConstrainedValue = Math.round(constrainedValue / this.stepAsNumber);
+        const remainderValue = 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.
+     */
+    setDisabledSideEffect(disabled) {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+        this.elementInternals.ariaDisabled = disabled.toString();
+        this.tabIndex = disabled ? -1 : 0;
     }
 }
 __decorate([
     attr
 ], Slider.prototype, "size", void 0);
 __decorate([
-    attr({ attribute: 'readonly', mode: 'boolean' })
-], Slider.prototype, "readOnly", void 0);
+    attr({ attribute: 'value', mode: 'fromView' })
+], Slider.prototype, "initialValue", void 0);
 __decorate([
     observable
 ], Slider.prototype, "direction", void 0);
@@ -463,13 +653,16 @@ __decorate([
     observable
 ], Slider.prototype, "valueTextFormatter", void 0);
 __decorate([
-    attr({ converter: nullableNumberConverter })
+    attr({ mode: 'boolean' })
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    attr({ converter: numberLikeStringConverter })
 ], Slider.prototype, "min", void 0);
 __decorate([
-    attr({ converter: nullableNumberConverter })
+    attr({ converter: numberLikeStringConverter })
 ], Slider.prototype, "max", void 0);
 __decorate([
-    attr({ converter: nullableNumberConverter })
+    attr({ converter: numberLikeStringConverter })
 ], Slider.prototype, "step", void 0);
 __decorate([
     attr