fix: position thumb properly at pointer coordinates (#33916)

Author: marchbox

change/@fluentui-web-components-633128ed-09cb-4208-8fd5-5e12b2019d9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: position thumb properly at pointer coordinates",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2,6 +2,13 @@ import { expect, test } from '../../test/playwright/index.js';
 import type { Slider } from './slider.js';
 import { SliderSize } from './slider.options.js';
 
+interface BoundingBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 test.describe('Slider', () => {
   test.use({
     tagName: 'fluent-slider',
@@ -631,4 +638,78 @@ test.describe('Slider', () => {
       await expect(wasChanged).resolves.toEqual(true);
     });
   });
+
+  test.describe('thumb position', () => {
+    test('should follow pointer event coordinates in horizontal orientation', async ({ fastPage, page }) => {
+      const { element } = fastPage;
+
+      const track = element.locator('.track');
+      const thumb = element.locator('.thumb-container');
+      const trackBox = (await track.boundingBox()) as BoundingBox;
+
+      expect(trackBox).not.toBeNull();
+
+      let thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+
+      const thumbCenterX = thumbBox.x + thumbBox.width / 2;
+      const thumbCenterY = thumbBox.y + thumbBox.height / 2;
+      const thumbMoveToX = thumbCenterX - trackBox.width * 0.1;
+      await page.mouse.move(thumbCenterX, thumbCenterY);
+      await page.mouse.down();
+
+      thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+      expect(thumbBox.x + thumbBox.width / 2).toBeCloseTo(thumbCenterX);
+      expect(thumbBox.y + thumbBox.height / 2).toBeCloseTo(thumbCenterY);
+
+      await page.mouse.move(thumbMoveToX, thumbCenterY);
+      await page.mouse.up();
+      const thumbHandle = await thumb.elementHandle();
+      await thumbHandle?.waitForElementState('stable');
+
+      thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+      expect(thumbBox.x + thumbBox.width / 2).toBeCloseTo(thumbMoveToX);
+      expect(thumbBox.y + thumbBox.height / 2).toBeCloseTo(thumbCenterY);
+    });
+
+    test('should follow pointer event coordinates in vertical orientation', async ({ fastPage, page }) => {
+      const { element } = fastPage;
+      await fastPage.setTemplate({ attributes: { orientation: 'vertical' } });
+      const elementBox = (await element.boundingBox()) as BoundingBox;
+
+      expect(elementBox.width).toBeLessThan(elementBox.height);
+
+      const track = element.locator('.track');
+      const thumb = element.locator('.thumb-container');
+      const trackBox = (await track.boundingBox()) as BoundingBox;
+
+      expect(trackBox).not.toBeNull();
+
+      let thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+
+      const thumbCenterX = thumbBox.x + thumbBox.width / 2;
+      const thumbCenterY = thumbBox.y + thumbBox.height / 2;
+      const thumbMoveToY = thumbCenterY - trackBox.height * 0.3;
+      await page.mouse.move(thumbCenterX, thumbCenterY);
+      await page.mouse.down();
+
+      thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+      expect(thumbBox.x + thumbBox.width / 2).toBeCloseTo(thumbCenterX);
+      expect(thumbBox.y + thumbBox.height / 2).toBeCloseTo(thumbCenterY);
+
+      await page.mouse.move(thumbCenterX, thumbMoveToY);
+      await page.mouse.up();
+      const thumbHandle = await thumb.elementHandle();
+      await thumbHandle?.waitForElementState('stable');
+
+      thumbBox = (await thumb.boundingBox()) as BoundingBox;
+      expect(thumbBox).not.toBeNull();
+      expect(thumbBox.x + thumbBox.width / 2).toBeCloseTo(thumbCenterX);
+      expect(thumbBox.y + thumbBox.height / 2).toBeCloseTo(thumbMoveToY);
+    });
+  });
 });

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

@@ -126,11 +126,6 @@ export const styles = css`
     width: var(--track-size);
   }
 
-  :host(${verticalState}) .track {
-    top: var(--track-overhang);
-    bottom: var(--track-overhang);
-  }
-
   .track::before {
     content: '';
     position: absolute;

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

@@ -717,10 +717,13 @@ 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 thumbWidth = this.thumb.getBoundingClientRect().width;
+
     const eventValue: number =
       this.orientation === Orientation.vertical
         ? sourceEvent.pageY - document.documentElement.scrollTop
-        : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft;
+        : sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
 
     this.value = `${this.calculateNewValue(eventValue)}`;
   };
@@ -772,12 +775,14 @@ export class Slider extends FASTElement implements SliderConfiguration {
       documentFn('mouseleave', this.handleWindowPointerUp);
       windowFn('pointermove', this.handlePointerMove);
 
+      const thumbWidth = this.thumb.getBoundingClientRect().width;
+
       if (event) {
         this.setupTrackConstraints();
         const controlValue: number =
           this.orientation === Orientation.vertical
             ? event.pageY - document.documentElement.scrollTop
-            : event.pageX - document.documentElement.scrollLeft - this.trackLeft;
+            : event.pageX - document.documentElement.scrollLeft - this.trackLeft - thumbWidth / 2;
 
         this.value = `${this.calculateNewValue(controlValue)}`;
       }