@zag-js/slider 0.24.0 → 0.26.0

package/dist/index.mjs

@@ -27,12 +27,44 @@ import { getPercentValue as getPercentValue2, getValuePercent as getValuePercent
 
 // src/slider.dom.ts
 import { getRelativePoint } from "@zag-js/dom-event";
-import { createScope } from "@zag-js/dom-query";
+import { createScope, queryAll } from "@zag-js/dom-query";
 import { dispatchInputValueEvent } from "@zag-js/form-utils";
 import { getPercentValue } from "@zag-js/numeric-range";
 
 // src/slider.style.ts
 import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
+function getBounds(value) {
+  const firstValue = value[0];
+  const lastThumb = value[value.length - 1];
+  return [firstValue, lastThumb];
+}
+function getRangeOffsets(ctx) {
+  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent);
+  if (ctx.valuePercent.length === 1) {
+    if (ctx.origin === "center") {
+      const isNegative = ctx.valuePercent[0] < 50;
+      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%";
+      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`;
+      return { start, end };
+    }
+    return { start: "0%", end: `${100 - lastPercent}%` };
+  }
+  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
+}
+function getRangeStyle(ctx) {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
+  }
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
+}
 function getVerticalThumbOffset(ctx) {
   const { height = 0 } = ctx.thumbSize ?? {};
   const getValue = getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2]);
@@ -64,37 +96,13 @@ function getVisibility(ctx) {
   }
   return visibility;
 }
-function getThumbStyle(ctx) {
+function getThumbStyle(ctx, index) {
   const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart";
   return {
     visibility: getVisibility(ctx),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
-    [placementProp]: "var(--slider-thumb-offset)"
-  };
-}
-function getRangeOffsets(ctx) {
-  let start = "0%";
-  let end = `${100 - ctx.valuePercent}%`;
-  if (ctx.origin === "center") {
-    const isNegative = ctx.valuePercent < 50;
-    start = isNegative ? `${ctx.valuePercent}%` : "50%";
-    end = isNegative ? "50%" : end;
-  }
-  return { start, end };
-}
-function getRangeStyle(ctx) {
-  if (ctx.isVertical) {
-    return {
-      position: "absolute",
-      bottom: "var(--slider-range-start)",
-      top: "var(--slider-range-end)"
-    };
-  }
-  return {
-    position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+    [placementProp]: `var(--slider-thumb-offset-${index})`
   };
 }
 function getControlStyle() {
@@ -106,15 +114,20 @@ function getControlStyle() {
 }
 function getRootStyle(ctx) {
   const range = getRangeOffsets(ctx);
+  const offsetStyles = ctx.value.reduce((styles, value, index) => {
+    const offset = getThumbOffset({ ...ctx, value });
+    return { ...styles, [`--slider-thumb-offset-${index}`]: offset };
+  }, {});
   return {
+    ...offsetStyles,
     "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-thumb-offset": getThumbOffset(ctx),
     "--slider-range-start": range.start,
     "--slider-range-end": range.end
   };
 }
 function getMarkerStyle(ctx, value) {
   return {
+    // @ts-expect-error
     visibility: getVisibility(ctx),
     position: "absolute",
     pointerEvents: "none",
@@ -125,12 +138,6 @@ function getMarkerStyle(ctx, value) {
     "--ty": !ctx.isHorizontal ? "50%" : "0%"
   };
 }
-function getLabelStyle() {
-  return { userSelect: "none" };
-}
-function getTrackStyle() {
-  return { position: "relative" };
-}
 function getMarkerGroupStyle() {
   return {
     userSelect: "none",
@@ -138,34 +145,34 @@ function getMarkerGroupStyle() {
     position: "relative"
   };
 }
-var styles = {
-  getThumbOffset,
+var styleGetterFns = {
+  getRootStyle,
   getControlStyle,
   getThumbStyle,
   getRangeStyle,
-  getRootStyle,
   getMarkerStyle,
-  getLabelStyle,
-  getTrackStyle,
   getMarkerGroupStyle
 };
 
 // src/slider.dom.ts
 var dom = createScope({
-  ...styles,
+  ...styleGetterFns,
   getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getThumbId: (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
+  getHiddenInputId: (ctx, index) => `slider:${ctx.id}:input:${index}`,
   getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `slider:${ctx.id}:input`,
-  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
-  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
-  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
+  getRangeId: (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
   getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
+  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getMarkerId: (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getThumbEl: (ctx, index) => dom.getById(ctx, dom.getThumbId(ctx, index)),
+  getHiddenInputEl: (ctx, index) => dom.getById(ctx, dom.getHiddenInputId(ctx, index)),
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getElements: (ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
+  getFirstEl: (ctx) => dom.getElements(ctx)[0],
+  getRangeEl: (ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
   getValueFromPoint(ctx, point) {
     const controlEl = dom.getControlEl(ctx);
     if (!controlEl)
@@ -179,174 +186,163 @@ var dom = createScope({
     return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {
-    const input = dom.getHiddenInputEl(ctx);
-    if (!input)
-      return;
-    dispatchInputValueEvent(input, { value: ctx.value });
+    const valueArray = Array.from(ctx.value);
+    valueArray.forEach((value, index) => {
+      const inputEl = dom.getHiddenInputEl(ctx, index);
+      if (!inputEl)
+        return;
+      dispatchInputValueEvent(inputEl, { value });
+    });
   }
 });
 
+// src/slider.utils.ts
+import {
+  clampValue,
+  getClosestValueIndex,
+  getNextStepValue,
+  getPreviousStepValue,
+  getValueRanges,
+  snapValueToStep
+} from "@zag-js/numeric-range";
+function normalizeValues(ctx, nextValues) {
+  return nextValues.map((value, index, values) => {
+    return constrainValue({ ...ctx, value: values }, value, index);
+  });
+}
+function getRangeAtIndex(ctx, index) {
+  return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
+}
+function constrainValue(ctx, value, index) {
+  const range = getRangeAtIndex(ctx, index);
+  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+  return clampValue(snapValue, range.min, range.max);
+}
+function decrement(ctx, index, step) {
+  const idx = index ?? ctx.focusedIndex;
+  const range = getRangeAtIndex(ctx, idx);
+  const nextValues = getPreviousStepValue(idx, {
+    ...range,
+    step: step ?? ctx.step,
+    values: ctx.value
+  });
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+  return nextValues;
+}
+function increment(ctx, index, step) {
+  const idx = index ?? ctx.focusedIndex;
+  const range = getRangeAtIndex(ctx, idx);
+  const nextValues = getNextStepValue(idx, {
+    ...range,
+    step: step ?? ctx.step,
+    values: ctx.value
+  });
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+  return nextValues;
+}
+function getClosestIndex(ctx, pointValue) {
+  return getClosestValueIndex(ctx.value, pointValue);
+}
+function assignArray(current, next) {
+  for (let i = 0; i < next.length; i++) {
+    const value = next[i];
+    current[i] = value;
+  }
+}
+
 // src/slider.connect.ts
 function connect(state, send, normalize) {
   const ariaLabel = state.context["aria-label"];
   const ariaLabelledBy = state.context["aria-labelledby"];
-  const ariaValueText = state.context.getAriaValueText?.(state.context.value);
+  const sliderValue = state.context.value;
   const isFocused = state.matches("focus");
   const isDragging = state.matches("dragging");
   const isDisabled = state.context.isDisabled;
-  const isInteractive = state.context.isInteractive;
   const isInvalid = state.context.invalid;
-  function getPercentValueFn(percent) {
-    return getPercentValue2(percent, state.context.min, state.context.max, state.context.step);
-  }
+  const isInteractive = state.context.isInteractive;
   function getValuePercentFn(value) {
     return getValuePercent2(value, state.context.min, state.context.max);
   }
+  function getPercentValueFn(percent) {
+    return getPercentValue2(percent, state.context.min, state.context.max, state.context.step);
+  }
   return {
-    isFocused,
-    isDragging,
     value: state.context.value,
-    percent: getValuePercent2(state.context.value, state.context.min, state.context.max),
+    isDragging,
+    isFocused,
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
-    getPercentValue: getPercentValueFn,
+    getThumbValue(index) {
+      return sliderValue[index];
+    },
+    setThumbValue(index, value) {
+      send({ type: "SET_VALUE", index, value });
+    },
     getValuePercent: getValuePercentFn,
-    focus() {
-      dom.getThumbEl(state.context)?.focus();
+    getPercentValue: getPercentValueFn,
+    getThumbPercent(index) {
+      return getValuePercentFn(sliderValue[index]);
     },
-    /**
-     * Function to increment the value of the slider by the step.
-     */
-    increment() {
-      send("INCREMENT");
+    setThumbPercent(index, percent) {
+      const value = getPercentValueFn(percent);
+      send({ type: "SET_VALUE", index, value });
     },
-    decrement() {
-      send("DECREMENT");
+    getThumbMin(index) {
+      return getRangeAtIndex(state.context, index).min;
+    },
+    getThumbMax(index) {
+      return getRangeAtIndex(state.context, index).max;
+    },
+    increment(index) {
+      send({ type: "INCREMENT", index });
+    },
+    decrement(index) {
+      send({ type: "DECREMENT", index });
+    },
+    focus() {
+      if (!isInteractive)
+        return;
+      send({ type: "FOCUS", index: 0 });
     },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: dom.getRootStyle(state.context)
-    }),
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
-      dir: state.context.dir,
       id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context, 0),
       onClick(event) {
         if (!isInteractive)
           return;
         event.preventDefault();
-        dom.getThumbEl(state.context)?.focus();
+        dom.getFirstEl(state.context)?.focus();
       },
-      style: dom.getLabelStyle()
+      style: {
+        userSelect: "none"
+      }
     }),
-    thumbProps: normalize.element({
-      ...parts.thumb.attrs,
-      dir: state.context.dir,
-      id: dom.getThumbId(state.context),
+    rootProps: normalize.element({
+      ...parts.root.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      draggable: false,
-      "aria-invalid": ariaAttr(isInvalid),
       "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": ariaAttr(isDisabled),
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
-      "aria-orientation": state.context.orientation,
-      "aria-valuemax": state.context.max,
-      "aria-valuemin": state.context.min,
-      "aria-valuenow": state.context.value,
-      "aria-valuetext": ariaValueText,
-      role: "slider",
-      tabIndex: isDisabled ? void 0 : 0,
-      onPointerDown(event) {
-        if (!isInteractive)
-          return;
-        send({ type: "THUMB_POINTER_DOWN" });
-        event.stopPropagation();
-      },
-      onBlur() {
-        if (!isInteractive)
-          return;
-        send("BLUR");
-      },
-      onFocus() {
-        if (!isInteractive)
-          return;
-        send("FOCUS");
-      },
-      onKeyDown(event) {
-        if (!isInteractive)
-          return;
-        const step = getEventStep(event) * state.context.step;
-        let prevent = true;
-        const keyMap = {
-          ArrowUp() {
-            send({ type: "ARROW_UP", step });
-            prevent = state.context.isVertical;
-          },
-          ArrowDown() {
-            send({ type: "ARROW_DOWN", step });
-            prevent = state.context.isVertical;
-          },
-          ArrowLeft() {
-            send({ type: "ARROW_LEFT", step });
-            prevent = state.context.isHorizontal;
-          },
-          ArrowRight() {
-            send({ type: "ARROW_RIGHT", step });
-            prevent = state.context.isHorizontal;
-          },
-          PageUp() {
-            send({ type: "PAGE_UP", step });
-          },
-          PageDown() {
-            send({ type: "PAGE_DOWN", step });
-          },
-          Home() {
-            send("HOME");
-          },
-          End() {
-            send("END");
-          }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keyMap[key];
-        if (!exec)
-          return;
-        exec(event);
-        if (prevent) {
-          event.preventDefault();
-        }
-      },
-      style: dom.getThumbStyle(state.context)
-    }),
-    hiddenInputProps: normalize.input({
-      defaultValue: state.context.value,
-      name: state.context.name,
-      form: state.context.form,
-      id: dom.getHiddenInputId(state.context),
-      hidden: true
+      "data-focus": dataAttr(isFocused),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context)
     }),
     outputProps: normalize.output({
       ...parts.output.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
       id: dom.getOutputId(state.context),
-      dir: state.context.dir,
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "),
       "aria-live": "off"
     }),
     trackProps: normalize.element({
@@ -354,15 +350,116 @@ function connect(state, send, normalize) {
       dir: state.context.dir,
       id: dom.getTrackId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
-      style: dom.getTrackStyle()
+      "data-focus": dataAttr(isFocused),
+      style: { position: "relative" }
     }),
+    getThumbProps(props) {
+      const { index } = props;
+      const value = sliderValue[index];
+      const range = getRangeAtIndex(state.context, index);
+      const ariaValueText = state.context.getAriaValueText?.(value, index);
+      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
+      return normalize.element({
+        ...parts.thumb.attrs,
+        dir: state.context.dir,
+        "data-index": index,
+        id: dom.getThumbId(state.context, index),
+        "data-disabled": dataAttr(isDisabled),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(isFocused && state.context.focusedIndex === index),
+        draggable: false,
+        "aria-disabled": ariaAttr(isDisabled),
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
+        "aria-orientation": state.context.orientation,
+        "aria-valuemax": range.max,
+        "aria-valuemin": range.min,
+        "aria-valuenow": sliderValue[index],
+        "aria-valuetext": ariaValueText,
+        role: "slider",
+        tabIndex: isDisabled ? void 0 : 0,
+        style: dom.getThumbStyle(state.context, index),
+        onPointerDown(event) {
+          if (!isInteractive)
+            return;
+          send({ type: "THUMB_POINTER_DOWN", index });
+          event.stopPropagation();
+        },
+        onBlur() {
+          if (!isInteractive)
+            return;
+          send("BLUR");
+        },
+        onFocus() {
+          if (!isInteractive)
+            return;
+          send({ type: "FOCUS", index });
+        },
+        onKeyDown(event) {
+          if (!isInteractive)
+            return;
+          const step = getEventStep(event) * state.context.step;
+          let prevent = true;
+          const keyMap = {
+            ArrowUp() {
+              send({ type: "ARROW_UP", step });
+              prevent = state.context.isVertical;
+            },
+            ArrowDown() {
+              send({ type: "ARROW_DOWN", step });
+              prevent = state.context.isVertical;
+            },
+            ArrowLeft() {
+              send({ type: "ARROW_LEFT", step });
+              prevent = state.context.isHorizontal;
+            },
+            ArrowRight() {
+              send({ type: "ARROW_RIGHT", step });
+              prevent = state.context.isHorizontal;
+            },
+            PageUp() {
+              send({ type: "PAGE_UP", step });
+            },
+            PageDown() {
+              send({ type: "PAGE_DOWN", step });
+            },
+            Home() {
+              send("HOME");
+            },
+            End() {
+              send("END");
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (!exec)
+            return;
+          exec(event);
+          if (prevent) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      });
+    },
+    getHiddenInputProps(props) {
+      const { index } = props;
+      return normalize.input({
+        name: `${state.context.name}[${index}]`,
+        form: state.context.form,
+        type: "text",
+        hidden: true,
+        defaultValue: state.context.value[index],
+        id: dom.getHiddenInputId(state.context, index)
+      });
+    },
     rangeProps: normalize.element({
+      id: dom.getRangeId(state.context),
       ...parts.range.attrs,
       dir: state.context.dir,
-      id: dom.getRangeId(state.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(isDisabled),
@@ -374,9 +471,10 @@ function connect(state, send, normalize) {
       dir: state.context.dir,
       id: dom.getControlId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
+      style: dom.getControlStyle(),
       onPointerDown(event) {
         if (!isInteractive)
           return;
@@ -387,27 +485,35 @@ function connect(state, send, normalize) {
         send({ type: "POINTER_DOWN", point });
         event.preventDefault();
         event.stopPropagation();
-      },
-      style: dom.getControlStyle()
+      }
     }),
     markerGroupProps: normalize.element({
       ...parts.markerGroup.attrs,
-      dir: state.context.dir,
       role: "presentation",
+      dir: state.context.dir,
       "aria-hidden": true,
       "data-orientation": state.context.orientation,
       style: dom.getMarkerGroupStyle()
     }),
-    getMarkerProps({ value }) {
-      const style = dom.getMarkerStyle(state.context, value);
-      const markerState = value > state.context.value ? "over-value" : value === state.context.value ? "at-value" : "under-value";
+    getMarkerProps(props) {
+      const style = dom.getMarkerStyle(state.context, props.value);
+      let markerState;
+      const first = state.context.value[0];
+      const last = state.context.value[state.context.value.length - 1];
+      if (props.value < first) {
+        markerState = "under-value";
+      } else if (props.value > last) {
+        markerState = "over-value";
+      } else {
+        markerState = "at-value";
+      }
       return normalize.element({
         ...parts.marker.attrs,
-        dir: state.context.dir,
-        id: dom.getMarkerId(state.context, value),
+        id: dom.getMarkerId(state.context, props.value),
         role: "presentation",
+        dir: state.context.dir,
         "data-orientation": state.context.orientation,
-        "data-value": value,
+        "data-value": props.value,
         "data-disabled": dataAttr(isDisabled),
         "data-state": markerState,
         style
@@ -420,37 +526,13 @@ function connect(state, send, normalize) {
 import { createMachine } from "@zag-js/core";
 import { trackPointerMove } from "@zag-js/dom-event";
 import { raf } from "@zag-js/dom-query";
-import { trackElementSize } from "@zag-js/element-size";
+import { trackElementsSize } from "@zag-js/element-size";
 import { trackFormControl } from "@zag-js/form-utils";
-import { clampValue as clampValue2, getValuePercent as getValuePercent3 } from "@zag-js/numeric-range";
+import { getValuePercent as getValuePercent3 } from "@zag-js/numeric-range";
 import { compact, isEqual } from "@zag-js/utils";
-
-// src/slider.utils.ts
-import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range";
-function constrainValue(ctx, value) {
-  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
-  return clampValue(snapValue, ctx.min, ctx.max);
-}
-function decrement(ctx, step) {
-  const index = 0;
-  const values = getPreviousStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-function increment(ctx, step) {
-  const index = 0;
-  const values = getNextStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-
-// src/slider.machine.ts
+var isEqualSize = (a, b) => {
+  return a?.width === b?.width && a?.height === b?.height;
+};
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -460,14 +542,15 @@ function machine(userContext) {
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
-        threshold: 5,
-        dir: "ltr",
-        origin: "start",
-        orientation: "horizontal",
-        value: 0,
-        step: 1,
+        focusedIndex: -1,
         min: 0,
         max: 100,
+        step: 1,
+        value: [0],
+        origin: "start",
+        orientation: "horizontal",
+        dir: "ltr",
+        minStepsBetweenThumbs: 0,
         disabled: false,
         ...ctx,
         fieldsetDisabled: false
@@ -476,85 +559,98 @@ function machine(userContext) {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isDisabled: (ctx2) => ctx2.disabled || ctx2.fieldsetDisabled,
-        isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
-        valuePercent: (ctx2) => 100 * getValuePercent3(ctx2.value, ctx2.min, ctx2.max)
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
+        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
+        spacing: (ctx2) => ctx2.minStepsBetweenThumbs * ctx2.step,
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
+        valuePercent(ctx2) {
+          return ctx2.value.map((value) => 100 * getValuePercent3(value, ctx2.min, ctx2.max));
+        }
       },
       watch: {
-        value: ["syncInputElement"]
+        value: ["syncInputElements"]
       },
-      activities: ["trackFormControlState", "trackThumbSize"],
+      entry: ["coarseValue"],
+      activities: ["trackFormControlState", "trackThumbsSize"],
       on: {
-        SET_VALUE: {
-          actions: "setValue"
-        },
+        SET_VALUE: [
+          {
+            guard: "hasIndex",
+            actions: "setValueAtIndex"
+          },
+          { actions: "setValue" }
+        ],
         INCREMENT: {
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         DECREMENT: {
-          actions: "decrement"
+          actions: "decrementAtIndex"
         }
       },
-      entry: ["checkValue"],
       states: {
         idle: {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+            },
+            FOCUS: {
+              target: "focus",
+              actions: "setFocusedIndex"
             },
-            FOCUS: "focus",
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"]
+              actions: ["setFocusedIndex", "focusActiveThumb"]
             }
           }
         },
         focus: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
             },
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"]
+              actions: ["setFocusedIndex", "focusActiveThumb"]
             },
             ARROW_LEFT: {
               guard: "isHorizontal",
-              actions: "decrement"
+              actions: "decrementAtIndex"
             },
             ARROW_RIGHT: {
               guard: "isHorizontal",
-              actions: "increment"
+              actions: "incrementAtIndex"
             },
             ARROW_UP: {
               guard: "isVertical",
-              actions: "increment"
+              actions: "incrementAtIndex"
             },
             ARROW_DOWN: {
               guard: "isVertical",
-              actions: "decrement"
+              actions: "decrementAtIndex"
             },
             PAGE_UP: {
-              actions: "increment"
+              actions: "incrementAtIndex"
             },
             PAGE_DOWN: {
-              actions: "decrement"
+              actions: "decrementAtIndex"
             },
             HOME: {
-              actions: "setToMin"
+              actions: "setActiveThumbToMin"
             },
             END: {
-              actions: "setToMax"
+              actions: "setActiveThumbToMax"
             },
-            BLUR: "idle"
+            BLUR: {
+              target: "idle",
+              actions: "clearFocusedIndex"
+            }
           }
         },
         dragging: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           activities: "trackPointerMove",
           on: {
             POINTER_UP: {
@@ -571,11 +667,12 @@ function machine(userContext) {
     {
       guards: {
         isHorizontal: (ctx2) => ctx2.isHorizontal,
-        isVertical: (ctx2) => ctx2.isVertical
+        isVertical: (ctx2) => ctx2.isVertical,
+        hasIndex: (_ctx, evt) => evt.index != null
       },
       activities: {
         trackFormControlState(ctx2, _evt, { initialContext }) {
-          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+          return trackFormControl(dom.getRootEl(ctx2), {
             onFieldsetDisabledChange(disabled) {
               ctx2.fieldsetDisabled = disabled;
             },
@@ -594,55 +691,83 @@ function machine(userContext) {
             }
           });
         },
-        trackThumbSize(ctx2, _evt) {
+        trackThumbsSize(ctx2) {
           if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize)
             return;
-          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
-            if (size)
+          return trackElementsSize({
+            getNodes: () => dom.getElements(ctx2),
+            observeMutation: true,
+            callback(size) {
+              if (!size || isEqualSize(ctx2.thumbSize, size))
+                return;
               ctx2.thumbSize = size;
+            }
           });
         }
       },
       actions: {
-        checkValue(ctx2) {
-          ctx2.value = constrainValue(ctx2, ctx2.value);
-        },
-        invokeOnChangeStart(ctx2) {
-          ctx2.onValueChangeStart?.({ value: ctx2.value });
+        syncInputElements(ctx2) {
+          ctx2.value.forEach((value, index) => {
+            const inputEl = dom.getHiddenInputEl(ctx2, index);
+            dom.setValue(inputEl, value);
+          });
         },
         invokeOnChangeEnd(ctx2) {
           ctx2.onValueChangeEnd?.({ value: ctx2.value });
         },
+        setClosestThumbIndex(ctx2, evt) {
+          const pointValue = dom.getValueFromPoint(ctx2, evt.point);
+          if (pointValue == null)
+            return;
+          const focusedIndex = getClosestIndex(ctx2, pointValue);
+          set.focusedIndex(ctx2, focusedIndex);
+        },
+        setFocusedIndex(ctx2, evt) {
+          set.focusedIndex(ctx2, evt.index);
+        },
+        clearFocusedIndex(ctx2) {
+          set.focusedIndex(ctx2, -1);
+        },
         setPointerValue(ctx2, evt) {
-          const value = dom.getValueFromPoint(ctx2, evt.point);
-          if (value == null)
+          const pointerValue = dom.getValueFromPoint(ctx2, evt.point);
+          if (pointerValue == null)
             return;
-          set.value(ctx2, clampValue2(value, ctx2.min, ctx2.max));
+          const value = constrainValue(ctx2, pointerValue, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, value);
         },
-        focusThumb(ctx2) {
-          raf(() => dom.getThumbEl(ctx2)?.focus({ preventScroll: true }));
+        focusActiveThumb(ctx2) {
+          raf(() => {
+            const thumbEl = dom.getThumbEl(ctx2, ctx2.focusedIndex);
+            thumbEl?.focus({ preventScroll: true });
+          });
         },
-        decrement(ctx2, evt) {
-          const value = decrement(ctx2, evt.step);
+        decrementAtIndex(ctx2, evt) {
+          const value = decrement(ctx2, evt.index, evt.step);
           set.value(ctx2, value);
         },
-        increment(ctx2, evt) {
-          const value = increment(ctx2, evt.step);
+        incrementAtIndex(ctx2, evt) {
+          const value = increment(ctx2, evt.index, evt.step);
           set.value(ctx2, value);
         },
-        setToMin(ctx2) {
-          set.value(ctx2, ctx2.min);
+        setActiveThumbToMin(ctx2) {
+          const { min } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, min);
         },
-        setToMax(ctx2) {
-          set.value(ctx2, ctx2.max);
+        setActiveThumbToMax(ctx2) {
+          const { max } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, max);
         },
-        setValue(ctx2, evt) {
-          const value = constrainValue(ctx2, evt.value);
+        coarseValue(ctx2) {
+          const value = normalizeValues(ctx2, ctx2.value);
           set.value(ctx2, value);
         },
-        syncInputElement(ctx2) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          dom.setValue(inputEl, ctx2.value);
+        setValueAtIndex(ctx2, evt) {
+          const value = constrainValue(ctx2, evt.value, evt.index);
+          set.valueAtIndex(ctx2, evt.index, value);
+        },
+        setValue(ctx2, evt) {
+          const value = normalizeValues(ctx2, evt.value);
+          set.value(ctx2, value);
         }
       }
     }
@@ -650,22 +775,41 @@ function machine(userContext) {
 }
 var invoke = {
   change: (ctx) => {
-    ctx.onValueChange?.({ value: ctx.value });
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value)
+    });
     dom.dispatchChangeEvent(ctx);
+  },
+  focusChange: (ctx) => {
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex
+    });
   }
 };
 var set = {
+  valueAtIndex: (ctx, index, value) => {
+    if (isEqual(ctx.value[index], value))
+      return;
+    ctx.value[index] = value;
+    invoke.change(ctx);
+  },
   value: (ctx, value) => {
     if (isEqual(ctx.value, value))
       return;
-    ctx.value = value;
+    assignArray(ctx.value, value);
     invoke.change(ctx);
+  },
+  focusedIndex: (ctx, index) => {
+    if (isEqual(ctx.focusedIndex, index))
+      return;
+    ctx.focusedIndex = index;
+    invoke.focusChange(ctx);
   }
 };
 export {
   anatomy,
   connect,
-  machine,
-  dom as unstable__dom
+  machine
 };
 //# sourceMappingURL=index.mjs.map