@zag-js/slider 1.32.0 → 1.33.0

package/dist/index.d.mts

@@ -5,6 +5,8 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
+type ThumbCollisionBehavior = "none" | "push" | "swap";
+type ThumbAlignment = "contain" | "center";
 interface ValueChangeDetails {
     value: number[];
 }
@@ -141,8 +143,17 @@ interface SliderProps extends DirectionProperty, CommonProperties {
         width: number;
         height: number;
     } | undefined;
+    /**
+     * Controls how thumbs behave when they collide during pointer interactions.
+     * - `none` (default): Thumbs cannot move past each other; excess movement is ignored.
+     * - `push`: Thumbs push each other without restoring their previous positions when dragged back.
+     * - `swap`: Thumbs swap places when dragged past each other.
+     *
+     * @default "none"
+     */
+    thumbCollisionBehavior?: "none" | "push" | "swap" | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
     /**
      * @computed
@@ -208,6 +219,11 @@ interface SliderSchema {
             x: number;
             y: number;
         } | null;
+        /**
+         * The values when a thumb drag starts.
+         * Used for swap collision behavior to determine swap direction.
+         */
+        thumbDragStartValue: number[] | null;
     };
     computed: Computed;
     event: EventObject;
@@ -316,4 +332,4 @@ declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [Thum
 declare const markerProps: "value"[];
 declare const splitMarkerProps: <Props extends MarkerProps>(props: Props) => [MarkerProps, Omit<Props, "value">];
 
-export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbAlignment, type ThumbCollisionBehavior, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };

package/dist/index.d.ts

@@ -5,6 +5,8 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
+type ThumbCollisionBehavior = "none" | "push" | "swap";
+type ThumbAlignment = "contain" | "center";
 interface ValueChangeDetails {
     value: number[];
 }
@@ -141,8 +143,17 @@ interface SliderProps extends DirectionProperty, CommonProperties {
         width: number;
         height: number;
     } | undefined;
+    /**
+     * Controls how thumbs behave when they collide during pointer interactions.
+     * - `none` (default): Thumbs cannot move past each other; excess movement is ignored.
+     * - `push`: Thumbs push each other without restoring their previous positions when dragged back.
+     * - `swap`: Thumbs swap places when dragged past each other.
+     *
+     * @default "none"
+     */
+    thumbCollisionBehavior?: "none" | "push" | "swap" | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
     /**
      * @computed
@@ -208,6 +219,11 @@ interface SliderSchema {
             x: number;
             y: number;
         } | null;
+        /**
+         * The values when a thumb drag starts.
+         * Used for swap collision behavior to determine swap direction.
+         */
+        thumbDragStartValue: number[] | null;
     };
     computed: Computed;
     event: EventObject;
@@ -316,4 +332,4 @@ declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [Thum
 declare const markerProps: "value"[];
 declare const splitMarkerProps: <Props extends MarkerProps>(props: Props) => [MarkerProps, Omit<Props, "value">];
 
-export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbAlignment, type ThumbCollisionBehavior, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };

package/dist/index.js

@@ -35,8 +35,13 @@ var getThumbEls = (ctx) => domQuery.queryAll(getControlEl(ctx), "[role=slider]")
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+  const isContain = thumbAlignment === "contain";
+  const isVertical = orientation === "vertical";
+  return isContain ? (isVertical ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
 var getPointValue = (params, point) => {
-  const { prop, scope, refs } = params;
+  const { context, prop, scope, refs } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
   const offset = refs.get("thumbDragOffset");
@@ -44,7 +49,8 @@ var getPointValue = (params, point) => {
     x: point.x - (offset?.x ?? 0),
     y: point.y - (offset?.y ?? 0)
   };
-  const relativePoint = domQuery.getRelativePoint(adjustedPoint, controlEl);
+  const thumbInset = getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"));
+  const relativePoint = getRelativePointWithInset(adjustedPoint, controlEl, thumbInset);
   const percent = relativePoint.getPercentValue({
     orientation: prop("orientation"),
     dir: prop("dir"),
@@ -52,6 +58,31 @@ var getPointValue = (params, point) => {
   });
   return utils.getPercentValue(percent, prop("min"), prop("max"), prop("step"));
 };
+function getRelativePointWithInset(point, element, inset) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const effectiveWidth = width - inset * 2;
+  const effectiveHeight = height - inset * 2;
+  const effectiveLeft = left + inset;
+  const effectiveTop = top + inset;
+  const offset = {
+    x: point.x - effectiveLeft,
+    y: point.y - effectiveTop
+  };
+  const percent = {
+    x: effectiveWidth > 0 ? utils.clampPercent(offset.x / effectiveWidth) : 0,
+    y: effectiveHeight > 0 ? utils.clampPercent(offset.y / effectiveHeight) : 0
+  };
+  function getPercentValue3(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue: getPercentValue3 };
+}
 var dispatchChangeEvent = (ctx, value) => {
   value.forEach((value2, index) => {
     const inputEl = getHiddenInputEl(ctx, index);
@@ -202,6 +233,83 @@ function getMarkerGroupStyle() {
     position: "relative"
   };
 }
+function getThumbBounds(ctx) {
+  const { index, values, min, max, gap } = ctx;
+  const prevThumb = values[index - 1];
+  const nextThumb = values[index + 1];
+  return {
+    min: prevThumb != null ? prevThumb + gap : min,
+    max: nextThumb != null ? nextThumb - gap : max
+  };
+}
+function round(value) {
+  return Math.round(value * 1e10) / 1e10;
+}
+function handleNone(ctx) {
+  const { index, value, values } = ctx;
+  const bounds = getThumbBounds(ctx);
+  const nextValues = values.slice();
+  nextValues[index] = round(utils.clampValue(value, bounds.min, bounds.max));
+  return { values: nextValues, index, swapped: false };
+}
+function handlePush(ctx) {
+  const { index, value, values, min, max, gap } = ctx;
+  const nextValues = values.slice();
+  const absoluteMin = min + index * gap;
+  const absoluteMax = max - (values.length - 1 - index) * gap;
+  nextValues[index] = round(utils.clampValue(value, absoluteMin, absoluteMax));
+  for (let i = index + 1; i < values.length; i++) {
+    const minAllowed = nextValues[i - 1] + gap;
+    if (nextValues[i] < minAllowed) {
+      nextValues[i] = round(minAllowed);
+    }
+  }
+  for (let i = index - 1; i >= 0; i--) {
+    const maxAllowed = nextValues[i + 1] - gap;
+    if (nextValues[i] > maxAllowed) {
+      nextValues[i] = round(maxAllowed);
+    }
+  }
+  return { values: nextValues, index, swapped: false };
+}
+function handleSwap(ctx, startValue) {
+  const { index, value, values, gap } = ctx;
+  const prevThumb = values[index - 1];
+  const nextThumb = values[index + 1];
+  const crossingNext = nextThumb != null && value >= nextThumb && value > startValue;
+  const crossingPrev = prevThumb != null && value <= prevThumb && value < startValue;
+  if (!crossingNext && !crossingPrev) {
+    return handleNone(ctx);
+  }
+  const swapIndex = crossingNext ? index + 1 : index - 1;
+  const nextValues = values.slice();
+  const newCtx = { ...ctx, index: swapIndex };
+  const bounds = getThumbBounds(newCtx);
+  nextValues[swapIndex] = round(utils.clampValue(value, bounds.min, bounds.max));
+  nextValues[index] = values[swapIndex];
+  if (crossingNext && nextValues[index] > nextValues[swapIndex] - gap) {
+    nextValues[index] = round(nextValues[swapIndex] - gap);
+  } else if (crossingPrev && nextValues[index] < nextValues[swapIndex] + gap) {
+    nextValues[index] = round(nextValues[swapIndex] + gap);
+  }
+  return { values: nextValues, index: swapIndex, swapped: true };
+}
+function resolveThumbCollision(behavior, index, value, values, min, max, step, minStepsBetweenThumbs, startValue) {
+  if (values.length === 1) {
+    return { values: [round(utils.clampValue(value, min, max))], index: 0, swapped: false };
+  }
+  const gap = step * minStepsBetweenThumbs;
+  const ctx = { behavior, index, value, values, min, max, gap };
+  switch (behavior) {
+    case "push":
+      return handlePush(ctx);
+    case "swap":
+      return handleSwap(ctx, startValue ?? values[index]);
+    case "none":
+    default:
+      return handleNone(ctx);
+  }
+}
 function normalizeValues(params, nextValues) {
   return nextValues.map((value, index) => {
     return constrainValue(params, value, index);
@@ -609,6 +717,7 @@ var machine = core.createMachine({
       thumbAlignment: "contain",
       origin: "start",
       orientation: "horizontal",
+      thumbCollisionBehavior: "none",
       minStepsBetweenThumbs,
       ...props2,
       defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
@@ -651,7 +760,8 @@ var machine = core.createMachine({
   },
   refs() {
     return {
-      thumbDragOffset: null
+      thumbDragOffset: null,
+      thumbDragStartValue: null
     };
   },
   computed: {
@@ -699,7 +809,7 @@ var machine = core.createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
         },
         FOCUS: {
           target: "focus",
@@ -707,7 +817,7 @@ var machine = core.createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
         }
       }
     },
@@ -716,11 +826,11 @@ var machine = core.createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
         },
         ARROW_DEC: {
           actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
@@ -746,14 +856,14 @@ var machine = core.createMachine({
       on: {
         POINTER_UP: {
           target: "focus",
-          actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset", "clearThumbDragStartValue"]
         },
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
         POINTER_CANCEL: {
           target: "idle",
-          actions: ["clearFocusedIndex", "clearThumbDragOffset"]
+          actions: ["clearFocusedIndex", "clearThumbDragOffset", "clearThumbDragStartValue"]
         }
       }
     }
@@ -834,14 +944,34 @@ var machine = core.createMachine({
       clearThumbDragOffset({ refs }) {
         refs.set("thumbDragOffset", null);
       },
+      setThumbDragStartValue({ refs, context }) {
+        refs.set("thumbDragStartValue", context.get("value").slice());
+      },
+      clearThumbDragStartValue({ refs }) {
+        refs.set("thumbDragStartValue", null);
+      },
       setPointerValue(params) {
         queueMicrotask(() => {
-          const { context, event } = params;
+          const { context, event, prop, refs } = params;
           const pointValue = getPointValue(params, event.point);
           if (pointValue == null) return;
           const focusedIndex = context.get("focusedIndex");
-          const value = constrainValue(params, pointValue, focusedIndex);
-          context.set("value", (prev) => utils.setValueAtIndex(prev, focusedIndex, value));
+          const startValues = refs.get("thumbDragStartValue");
+          const result = resolveThumbCollision(
+            prop("thumbCollisionBehavior"),
+            focusedIndex,
+            pointValue,
+            context.get("value"),
+            prop("min"),
+            prop("max"),
+            prop("step"),
+            prop("minStepsBetweenThumbs"),
+            startValues?.[focusedIndex]
+          );
+          if (result.swapped) {
+            context.set("focusedIndex", result.index);
+          }
+          context.set("value", result.values);
         });
       },
       focusActiveThumb({ scope, context }) {
@@ -908,7 +1038,7 @@ var props = types.createProps()([
   "readOnly",
   "step",
   "thumbAlignment",
-  "thumbAlignment",
+  "thumbCollisionBehavior",
   "thumbSize",
   "value",
   "defaultValue"

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { raf, setElementValue, queryAll, resizeObserverBorderBox, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setValueAtIndex, callAll, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, pick, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
+import { raf, setElementValue, queryAll, resizeObserverBorderBox, trackPointerMove, trackFormControl, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
+import { setValueAtIndex, callAll, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, pick, isValueWithinRange, clampPercent, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine, memo } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -33,8 +33,13 @@ var getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+  const isContain = thumbAlignment === "contain";
+  const isVertical = orientation === "vertical";
+  return isContain ? (isVertical ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
 var getPointValue = (params, point) => {
-  const { prop, scope, refs } = params;
+  const { context, prop, scope, refs } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
   const offset = refs.get("thumbDragOffset");
@@ -42,7 +47,8 @@ var getPointValue = (params, point) => {
     x: point.x - (offset?.x ?? 0),
     y: point.y - (offset?.y ?? 0)
   };
-  const relativePoint = getRelativePoint(adjustedPoint, controlEl);
+  const thumbInset = getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"));
+  const relativePoint = getRelativePointWithInset(adjustedPoint, controlEl, thumbInset);
   const percent = relativePoint.getPercentValue({
     orientation: prop("orientation"),
     dir: prop("dir"),
@@ -50,6 +56,31 @@ var getPointValue = (params, point) => {
   });
   return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
 };
+function getRelativePointWithInset(point, element, inset) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const effectiveWidth = width - inset * 2;
+  const effectiveHeight = height - inset * 2;
+  const effectiveLeft = left + inset;
+  const effectiveTop = top + inset;
+  const offset = {
+    x: point.x - effectiveLeft,
+    y: point.y - effectiveTop
+  };
+  const percent = {
+    x: effectiveWidth > 0 ? clampPercent(offset.x / effectiveWidth) : 0,
+    y: effectiveHeight > 0 ? clampPercent(offset.y / effectiveHeight) : 0
+  };
+  function getPercentValue3(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue: getPercentValue3 };
+}
 var dispatchChangeEvent = (ctx, value) => {
   value.forEach((value2, index) => {
     const inputEl = getHiddenInputEl(ctx, index);
@@ -200,6 +231,83 @@ function getMarkerGroupStyle() {
     position: "relative"
   };
 }
+function getThumbBounds(ctx) {
+  const { index, values, min, max, gap } = ctx;
+  const prevThumb = values[index - 1];
+  const nextThumb = values[index + 1];
+  return {
+    min: prevThumb != null ? prevThumb + gap : min,
+    max: nextThumb != null ? nextThumb - gap : max
+  };
+}
+function round(value) {
+  return Math.round(value * 1e10) / 1e10;
+}
+function handleNone(ctx) {
+  const { index, value, values } = ctx;
+  const bounds = getThumbBounds(ctx);
+  const nextValues = values.slice();
+  nextValues[index] = round(clampValue(value, bounds.min, bounds.max));
+  return { values: nextValues, index, swapped: false };
+}
+function handlePush(ctx) {
+  const { index, value, values, min, max, gap } = ctx;
+  const nextValues = values.slice();
+  const absoluteMin = min + index * gap;
+  const absoluteMax = max - (values.length - 1 - index) * gap;
+  nextValues[index] = round(clampValue(value, absoluteMin, absoluteMax));
+  for (let i = index + 1; i < values.length; i++) {
+    const minAllowed = nextValues[i - 1] + gap;
+    if (nextValues[i] < minAllowed) {
+      nextValues[i] = round(minAllowed);
+    }
+  }
+  for (let i = index - 1; i >= 0; i--) {
+    const maxAllowed = nextValues[i + 1] - gap;
+    if (nextValues[i] > maxAllowed) {
+      nextValues[i] = round(maxAllowed);
+    }
+  }
+  return { values: nextValues, index, swapped: false };
+}
+function handleSwap(ctx, startValue) {
+  const { index, value, values, gap } = ctx;
+  const prevThumb = values[index - 1];
+  const nextThumb = values[index + 1];
+  const crossingNext = nextThumb != null && value >= nextThumb && value > startValue;
+  const crossingPrev = prevThumb != null && value <= prevThumb && value < startValue;
+  if (!crossingNext && !crossingPrev) {
+    return handleNone(ctx);
+  }
+  const swapIndex = crossingNext ? index + 1 : index - 1;
+  const nextValues = values.slice();
+  const newCtx = { ...ctx, index: swapIndex };
+  const bounds = getThumbBounds(newCtx);
+  nextValues[swapIndex] = round(clampValue(value, bounds.min, bounds.max));
+  nextValues[index] = values[swapIndex];
+  if (crossingNext && nextValues[index] > nextValues[swapIndex] - gap) {
+    nextValues[index] = round(nextValues[swapIndex] - gap);
+  } else if (crossingPrev && nextValues[index] < nextValues[swapIndex] + gap) {
+    nextValues[index] = round(nextValues[swapIndex] + gap);
+  }
+  return { values: nextValues, index: swapIndex, swapped: true };
+}
+function resolveThumbCollision(behavior, index, value, values, min, max, step, minStepsBetweenThumbs, startValue) {
+  if (values.length === 1) {
+    return { values: [round(clampValue(value, min, max))], index: 0, swapped: false };
+  }
+  const gap = step * minStepsBetweenThumbs;
+  const ctx = { behavior, index, value, values, min, max, gap };
+  switch (behavior) {
+    case "push":
+      return handlePush(ctx);
+    case "swap":
+      return handleSwap(ctx, startValue ?? values[index]);
+    case "none":
+    default:
+      return handleNone(ctx);
+  }
+}
 function normalizeValues(params, nextValues) {
   return nextValues.map((value, index) => {
     return constrainValue(params, value, index);
@@ -607,6 +715,7 @@ var machine = createMachine({
       thumbAlignment: "contain",
       origin: "start",
       orientation: "horizontal",
+      thumbCollisionBehavior: "none",
       minStepsBetweenThumbs,
       ...props2,
       defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
@@ -649,7 +758,8 @@ var machine = createMachine({
   },
   refs() {
     return {
-      thumbDragOffset: null
+      thumbDragOffset: null,
+      thumbDragStartValue: null
     };
   },
   computed: {
@@ -697,7 +807,7 @@ var machine = createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
         },
         FOCUS: {
           target: "focus",
@@ -705,7 +815,7 @@ var machine = createMachine({
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
         }
       }
     },
@@ -714,11 +824,11 @@ var machine = createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["setFocusedIndex", "setThumbDragOffset", "focusActiveThumb"]
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
         },
         ARROW_DEC: {
           actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
@@ -744,14 +854,14 @@ var machine = createMachine({
       on: {
         POINTER_UP: {
           target: "focus",
-          actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset", "clearThumbDragStartValue"]
         },
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
         POINTER_CANCEL: {
           target: "idle",
-          actions: ["clearFocusedIndex", "clearThumbDragOffset"]
+          actions: ["clearFocusedIndex", "clearThumbDragOffset", "clearThumbDragStartValue"]
         }
       }
     }
@@ -832,14 +942,34 @@ var machine = createMachine({
       clearThumbDragOffset({ refs }) {
         refs.set("thumbDragOffset", null);
       },
+      setThumbDragStartValue({ refs, context }) {
+        refs.set("thumbDragStartValue", context.get("value").slice());
+      },
+      clearThumbDragStartValue({ refs }) {
+        refs.set("thumbDragStartValue", null);
+      },
       setPointerValue(params) {
         queueMicrotask(() => {
-          const { context, event } = params;
+          const { context, event, prop, refs } = params;
           const pointValue = getPointValue(params, event.point);
           if (pointValue == null) return;
           const focusedIndex = context.get("focusedIndex");
-          const value = constrainValue(params, pointValue, focusedIndex);
-          context.set("value", (prev) => setValueAtIndex(prev, focusedIndex, value));
+          const startValues = refs.get("thumbDragStartValue");
+          const result = resolveThumbCollision(
+            prop("thumbCollisionBehavior"),
+            focusedIndex,
+            pointValue,
+            context.get("value"),
+            prop("min"),
+            prop("max"),
+            prop("step"),
+            prop("minStepsBetweenThumbs"),
+            startValues?.[focusedIndex]
+          );
+          if (result.swapped) {
+            context.set("focusedIndex", result.index);
+          }
+          context.set("value", result.values);
         });
       },
       focusActiveThumb({ scope, context }) {
@@ -906,7 +1036,7 @@ var props = createProps()([
   "readOnly",
   "step",
   "thumbAlignment",
-  "thumbAlignment",
+  "thumbCollisionBehavior",
   "thumbSize",
   "value",
   "defaultValue"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "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.32.0",
-    "@zag-js/core": "1.32.0",
-    "@zag-js/dom-query": "1.32.0",
-    "@zag-js/utils": "1.32.0",
-    "@zag-js/types": "1.32.0"
+    "@zag-js/anatomy": "1.33.0",
+    "@zag-js/core": "1.33.0",
+    "@zag-js/dom-query": "1.33.0",
+    "@zag-js/utils": "1.33.0",
+    "@zag-js/types": "1.33.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"