@zag-js/slider 1.26.3 → 1.26.5

package/dist/index.d.mts

@@ -199,6 +199,16 @@ interface SliderSchema {
     state: "idle" | "dragging" | "focus";
     props: RequiredBy<SliderProps, PropsWithDefault>;
     context: Context;
+    refs: {
+        /**
+         * The offset from the thumb center when pointer down occurs.
+         * Used to maintain constant offset during drag.
+         */
+        thumbDragOffset: {
+            x: number;
+            y: number;
+        } | null;
+    };
     computed: Computed;
     event: EventObject;
     action: string;

package/dist/index.d.ts

@@ -199,6 +199,16 @@ interface SliderSchema {
     state: "idle" | "dragging" | "focus";
     props: RequiredBy<SliderProps, PropsWithDefault>;
     context: Context;
+    refs: {
+        /**
+         * The offset from the thumb center when pointer down occurs.
+         * Used to maintain constant offset during drag.
+         */
+        thumbDragOffset: {
+            x: number;
+            y: number;
+        } | null;
+    };
     computed: Computed;
     event: EventObject;
     action: string;

package/dist/index.js

@@ -36,10 +36,15 @@ var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 var getPointValue = (params, point) => {
-  const { prop, scope } = params;
+  const { prop, scope, refs } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
-  const relativePoint = domQuery.getRelativePoint(point, controlEl);
+  const offset = refs.get("thumbDragOffset");
+  const adjustedPoint = {
+    x: point.x - (offset?.x ?? 0),
+    y: point.y - (offset?.y ?? 0)
+  };
+  const relativePoint = domQuery.getRelativePoint(adjustedPoint, controlEl);
   const percent = relativePoint.getPercentValue({
     orientation: prop("orientation"),
     dir: prop("dir"),
@@ -415,7 +420,17 @@ function connect(service, normalize2) {
         onPointerDown(event) {
           if (!interactive) return;
           if (!domQuery.isLeftClick(event)) return;
-          send({ type: "THUMB_POINTER_DOWN", index });
+          const thumbEl = event.currentTarget;
+          const rect = thumbEl.getBoundingClientRect();
+          const midpoint = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+          };
+          const offset = {
+            x: event.clientX - midpoint.x,
+            y: event.clientY - midpoint.y
+          };
+          send({ type: "THUMB_POINTER_DOWN", index, offset });
           event.stopPropagation();
         },
         onBlur() {
@@ -634,6 +649,11 @@ var machine = core.createMachine({
       }))
     };
   },
+  refs() {
+    return {
+      thumbDragOffset: null
+    };
+  },
   computed: {
     isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
     isVertical: ({ prop }) => prop("orientation") === "vertical",
@@ -687,7 +707,7 @@ var machine = core.createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
         }
       }
     },
@@ -700,7 +720,7 @@ var machine = core.createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
         },
         ARROW_DEC: {
           actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
@@ -726,14 +746,14 @@ var machine = core.createMachine({
       on: {
         POINTER_UP: {
           target: "focus",
-          actions: ["invokeOnChangeEnd"]
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
         },
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
         POINTER_CANCEL: {
           target: "idle",
-          actions: ["clearFocusedIndex"]
+          actions: ["clearFocusedIndex", "clearThumbDragOffset"]
         }
       }
     }
@@ -809,6 +829,13 @@ var machine = core.createMachine({
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);
       },
+      setThumbDragOffset(params) {
+        const { refs, event } = params;
+        refs.set("thumbDragOffset", event.offset ?? null);
+      },
+      clearThumbDragOffset({ refs }) {
+        refs.set("thumbDragOffset", null);
+      },
       setPointerValue(params) {
         queueMicrotask(() => {
           const { context, event } = params;

package/dist/index.mjs

@@ -34,10 +34,15 @@ var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 var getPointValue = (params, point) => {
-  const { prop, scope } = params;
+  const { prop, scope, refs } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
-  const relativePoint = getRelativePoint(point, controlEl);
+  const offset = refs.get("thumbDragOffset");
+  const adjustedPoint = {
+    x: point.x - (offset?.x ?? 0),
+    y: point.y - (offset?.y ?? 0)
+  };
+  const relativePoint = getRelativePoint(adjustedPoint, controlEl);
   const percent = relativePoint.getPercentValue({
     orientation: prop("orientation"),
     dir: prop("dir"),
@@ -413,7 +418,17 @@ function connect(service, normalize2) {
         onPointerDown(event) {
           if (!interactive) return;
           if (!isLeftClick(event)) return;
-          send({ type: "THUMB_POINTER_DOWN", index });
+          const thumbEl = event.currentTarget;
+          const rect = thumbEl.getBoundingClientRect();
+          const midpoint = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+          };
+          const offset = {
+            x: event.clientX - midpoint.x,
+            y: event.clientY - midpoint.y
+          };
+          send({ type: "THUMB_POINTER_DOWN", index, offset });
           event.stopPropagation();
         },
         onBlur() {
@@ -632,6 +647,11 @@ var machine = createMachine({
       }))
     };
   },
+  refs() {
+    return {
+      thumbDragOffset: null
+    };
+  },
   computed: {
     isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
     isVertical: ({ prop }) => prop("orientation") === "vertical",
@@ -685,7 +705,7 @@ var machine = createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
         }
       }
     },
@@ -698,7 +718,7 @@ var machine = createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
         },
         ARROW_DEC: {
           actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
@@ -724,14 +744,14 @@ var machine = createMachine({
       on: {
         POINTER_UP: {
           target: "focus",
-          actions: ["invokeOnChangeEnd"]
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
         },
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
         POINTER_CANCEL: {
           target: "idle",
-          actions: ["clearFocusedIndex"]
+          actions: ["clearFocusedIndex", "clearThumbDragOffset"]
         }
       }
     }
@@ -807,6 +827,13 @@ var machine = createMachine({
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);
       },
+      setThumbDragOffset(params) {
+        const { refs, event } = params;
+        refs.set("thumbDragOffset", event.offset ?? null);
+      },
+      clearThumbDragOffset({ refs }) {
+        refs.set("thumbDragOffset", null);
+      },
       setPointerValue(params) {
         queueMicrotask(() => {
           const { context, event } = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.26.3",
+  "version": "1.26.5",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.26.3",
-    "@zag-js/core": "1.26.3",
-    "@zag-js/dom-query": "1.26.3",
-    "@zag-js/utils": "1.26.3",
-    "@zag-js/types": "1.26.3"
+    "@zag-js/anatomy": "1.26.5",
+    "@zag-js/core": "1.26.5",
+    "@zag-js/dom-query": "1.26.5",
+    "@zag-js/utils": "1.26.5",
+    "@zag-js/types": "1.26.5"
   },
   "devDependencies": {
     "clean-package": "2.2.0"