feat(Slider): center interaction

change/@fluentui-web-components-ecc74c5a-67b4-4ad9-90cf-e1e08940ccdf.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Improve Slider Drag Interaction to be centered on Thumb",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/README.md

@@ -89,4 +89,5 @@ This is a known issue and will indicate that you need to refresh the page. We're
 
 ## Testing
 
+Tests run on playwright `npx playwright install`.
 When testing locally, start the dev server and in a separate terminal window, run `yarn test:dev` within the web-components folder.

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

@@ -334,6 +334,12 @@ export class Slider extends FASTElement implements SliderConfiguration {
   @observable
   public trackHeight: number = 0;
 
+  /**
+   * @internal
+   */
+  @observable
+  public trackTop: number = 0;
+
   /**
    * @internal
    */
@@ -654,15 +660,21 @@ export class Slider extends FASTElement implements SliderConfiguration {
   }
 
   private setupTrackConstraints = (): void => {
-    const clientRect: DOMRect = this.track.getBoundingClientRect();
+    const trackClientRect: DOMRect = this.track.getBoundingClientRect();
     this.trackWidth = this.track.clientWidth;
     this.trackMinWidth = this.track.clientLeft;
-    this.trackHeight = clientRect.top;
-    this.trackMinHeight = clientRect.bottom;
-    this.trackLeft = this.getBoundingClientRect().left;
+    this.trackHeight = trackClientRect.top;
+    this.trackMinHeight = trackClientRect.bottom;
+
+    const clientRect = this.getBoundingClientRect();
+    this.trackTop = clientRect.top;
+    this.trackLeft = clientRect.left;
     if (this.trackWidth === 0) {
       this.trackWidth = 1;
     }
+    if (this.trackHeight === 0) {
+      this.trackHeight = 1;
+    }
   };
 
   private setupListeners = (remove: boolean = false): void => {
@@ -716,10 +728,12 @@ export class Slider extends FASTElement implements SliderConfiguration {
 
     // update the value based on current position
     const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : (event as PointerEvent);
+    const thumbHalfSize =
+      this.orientation === Orientation.vertical ? this.thumb.clientHeight / 2 : this.thumb.clientWidth / 2;
     const eventValue: number =
       this.orientation === Orientation.vertical
-        ? sourceEvent.pageY - document.documentElement.scrollTop
-        : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft;
+        ? sourceEvent.pageY - document.documentElement.scrollTop - this.trackTop - thumbHalfSize
+        : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbHalfSize;
 
     this.value = `${this.calculateNewValue(eventValue)}`;
   };
@@ -738,8 +752,8 @@ export class Slider extends FASTElement implements SliderConfiguration {
     // update the value based on current position
     const newPosition = convertPixelToPercent(
       rawValue,
-      this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth,
-      this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth,
+      this.orientation === Orientation.vertical ? this.trackMinHeight - this.trackHeight : this.trackMinWidth,
+      this.orientation === Orientation.vertical ? 0 : this.trackWidth,
       this.direction,
     );
     const newValue: number = (this.maxAsNumber - this.minAsNumber) * newPosition + this.minAsNumber;
@@ -773,10 +787,12 @@ export class Slider extends FASTElement implements SliderConfiguration {
 
       if (event) {
         this.setupTrackConstraints();
+        const thumbHalfSize =
+          this.orientation === Orientation.vertical ? this.thumb.clientHeight / 2 : this.thumb.clientWidth / 2;
         const controlValue: number =
           this.orientation === Orientation.vertical
-            ? event.pageY - document.documentElement.scrollTop
-            : event.pageX - document.documentElement.scrollLeft - this.trackLeft;
+            ? event.pageY - document.documentElement.scrollTop - this.trackTop - thumbHalfSize
+            : event.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbHalfSize;
 
         this.value = `${this.calculateNewValue(controlValue)}`;
       }