[fix]: Improve slider directional css and make direction change obser… (#33834)

Author: eljefe223

change/@fluentui-web-components-7dc89f98-c6de-4087-b1ac-dd614ef21c57.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "makes direction change observable for slider",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -3504,6 +3504,8 @@ export class Slider extends FASTElement implements SliderConfiguration {
     decrement(): void;
     // @internal (undocumented)
     direction: Direction;
+    // (undocumented)
+    directionChanged(): void;
     disabled: boolean;
     // (undocumented)
     protected disabledChanged(): void;

packages/web-components/src/slider/slider.styles.ts

@@ -140,6 +140,10 @@ export const styles = css`
     width: var(--slider-progress);
   }
 
+  :host(:dir(rtl)) .track::before {
+    width: calc(100% - var(--slider-progress));
+  }
+
   :host(${verticalState}) .track::before {
     width: 100%;
     bottom: 0;

packages/web-components/src/slider/slider.ts

@@ -68,7 +68,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     switch (propertyName) {
       case 'min':
       case 'max':
-        this.setSliderPosition(this.direction);
+        this.setSliderPosition();
       case 'step':
         this.handleStepStyles();
         break;
@@ -225,7 +225,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
    */
   public get value(): string {
     Observable.track(this, 'value');
-    return this._value.toString();
+    return this._value?.toString() ?? '';
   }
 
   public set value(value: string) {
@@ -245,7 +245,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     this._value = value.toString();
     this.elementInternals.ariaValueNow = this._value;
     this.elementInternals.ariaValueText = this.valueTextFormatter(this._value);
-    this.setSliderPosition(this.direction);
+    this.setSliderPosition();
     this.$emit('change');
     this.setFormValue(value);
     Observable.notify(this, 'value');
@@ -303,6 +303,9 @@ export class Slider extends FASTElement implements SliderConfiguration {
    */
   @observable
   public direction: Direction = Direction.ltr;
+  public directionChanged(): void {
+    this.setSliderPosition();
+  }
 
   /**
    * @internal
@@ -502,7 +505,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     swapStates(this.elementInternals, prev, next, Orientation);
 
     if (this.$fastController.isConnected) {
-      this.setSliderPosition(this.direction);
+      this.setSliderPosition();
     }
   }
 
@@ -536,7 +539,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
     this.setupTrackConstraints();
     this.setupListeners();
     this.setupDefaultValue();
-    this.setSliderPosition(this.direction);
+    this.setSliderPosition();
 
     Observable.getNotifier(this).subscribe(this, 'max');
     Observable.getNotifier(this).subscribe(this, 'min');
@@ -629,18 +632,16 @@ export class Slider extends FASTElement implements SliderConfiguration {
 
   /**
    * Places the thumb based on the current value
-   *
-   * @param direction - writing mode
-   */
-  private setSliderPosition(direction: Direction): void {
-    const newPct: number = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, direction);
-    const percentage: number = (1 - newPct) * 100;
-    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}`;
+   */
+  private setSliderPosition(): void {
+    const newPct: number = convertPixelToPercent(
+      parseFloat(this.value),
+      this.minAsNumber,
+      this.maxAsNumber,
+      this.direction,
+    );
+    const percentage: number = newPct * 100;
+    this.position = `--slider-thumb: ${percentage}%; --slider-progress: ${percentage}%`;
   }
 
   /**