@zag-js/slider 0.82.1 → 1.0.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, queryAll, getRelativePoint, dispatchInputValueEvent, dataAttr, ariaAttr, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint, trackFormControl, trackPointerMove, raf } from '@zag-js/dom-query';
-import { getPercentValue, createSplitProps, compact, getValuePercent, isEqual, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, getValueTransformer } from '@zag-js/utils';
+import { trackFormControl, trackPointerMove, setElementValue, raf, queryAll, getRelativePoint, dispatchInputValueEvent, dataAttr, ariaAttr, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint } from '@zag-js/dom-query';
+import { compact, getValuePercent, setValueAtIndex, createSplitProps, getPercentValue, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, first, last, getValueTransformer } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { trackElementsSize } from '@zag-js/element-size';
 import { createProps } from '@zag-js/types';
@@ -19,26 +19,65 @@ var anatomy = createAnatomy("slider").parts(
   "draggingIndicator"
 );
 var parts = anatomy.build();
+var getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getElements = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+var getFirstEl = (ctx) => getElements(ctx)[0];
+var getValueFromPoint = (params, point) => {
+  const { prop, scope } = params;
+  const controlEl = getControlEl(scope);
+  if (!controlEl) return;
+  const relativePoint = getRelativePoint(point, controlEl);
+  const percent = relativePoint.getPercentValue({
+    orientation: prop("orientation"),
+    dir: prop("dir"),
+    inverted: { y: true }
+  });
+  return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
+};
+var dispatchChangeEvent = (ctx, value) => {
+  value.forEach((value2, index) => {
+    const inputEl = getHiddenInputEl(ctx, index);
+    if (!inputEl) return;
+    dispatchInputValueEvent(inputEl, { value: value2 });
+  });
+};
 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]}%`;
+function getRangeOffsets(params) {
+  const { prop, computed } = params;
+  const valuePercent = computed("valuePercent");
+  const [firstPercent, lastPercent] = getBounds(valuePercent);
+  if (valuePercent.length === 1) {
+    if (prop("origin") === "center") {
+      const isNegative = valuePercent[0] < 50;
+      const start = isNegative ? `${valuePercent[0]}%` : "50%";
+      const end = isNegative ? "50%" : `${100 - valuePercent[0]}%`;
       return { start, end };
     }
     return { start: "0%", end: `${100 - lastPercent}%` };
   }
   return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
 }
-function getRangeStyle(ctx) {
-  if (ctx.isVertical) {
+function getRangeStyle(params) {
+  const { computed } = params;
+  const isVertical = computed("isVertical");
+  const isRtl = computed("isRtl");
+  if (isVertical) {
     return {
       position: "absolute",
       bottom: "var(--slider-range-start)",
@@ -47,44 +86,51 @@ function getRangeStyle(ctx) {
   }
   return {
     position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+    [isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [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]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
+function getVerticalThumbOffset(params, value) {
+  const { context, prop } = params;
+  const { height = 0 } = context.get("thumbSize") ?? {};
+  const getValue = getValueTransformer([prop("min"), prop("max")], [-height / 2, height / 2]);
+  return parseFloat(getValue(value).toFixed(2));
 }
-function getHorizontalThumbOffset(ctx) {
-  const { width = 0 } = ctx.thumbSize ?? {};
-  if (ctx.isRtl) {
-    const getValue2 = getValueTransformer([ctx.max, ctx.min], [-width / 2, width / 2]);
-    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+function getHorizontalThumbOffset(params, value) {
+  const { computed, context, prop } = params;
+  const { width = 0 } = context.get("thumbSize") ?? {};
+  const isRtl = computed("isRtl");
+  if (isRtl) {
+    const getValue2 = getValueTransformer([prop("max"), prop("min")], [-width / 2, width / 2]);
+    return -1 * parseFloat(getValue2(value).toFixed(2));
   }
-  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
+  const getValue = getValueTransformer([prop("min"), prop("max")], [-width / 2, width / 2]);
+  return parseFloat(getValue(value).toFixed(2));
 }
-function getOffset(ctx, percent) {
-  if (ctx.thumbAlignment === "center") return `${percent}%`;
-  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+function getOffset(params, percent, value) {
+  const { computed, prop } = params;
+  if (prop("thumbAlignment") === "center") return `${percent}%`;
+  const offset = computed("isVertical") ? getVerticalThumbOffset(params, value) : getHorizontalThumbOffset(params, value);
   return `calc(${percent}% - ${offset}px)`;
 }
-function getThumbOffset(ctx) {
-  let percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
-  return getOffset(ctx, percent);
+function getThumbOffset(params, value) {
+  const { prop } = params;
+  const percent = getValuePercent(value, prop("min"), prop("max")) * 100;
+  return getOffset(params, percent, value);
 }
-function getVisibility(ctx) {
+function getVisibility(params) {
+  const { computed, prop } = params;
   let visibility = "visible";
-  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+  if (prop("thumbAlignment") === "contain" && !computed("hasMeasuredThumbSize")) {
     visibility = "hidden";
   }
   return visibility;
 }
-function getThumbStyle(ctx, index) {
-  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart";
+function getThumbStyle(params, index) {
+  const { computed } = params;
+  const placementProp = computed("isVertical") ? "bottom" : "insetInlineStart";
   return {
-    visibility: getVisibility(ctx),
+    visibility: getVisibility(params),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
     [placementProp]: `var(--slider-thumb-offset-${index})`
@@ -98,30 +144,34 @@ function getControlStyle() {
     position: "relative"
   };
 }
-function getRootStyle(ctx) {
-  const range = getRangeOffsets(ctx);
-  const offsetStyles = ctx.value.reduce((styles, value, index) => {
-    const offset = getThumbOffset({ ...ctx, value });
+function getRootStyle(params) {
+  const { context, computed } = params;
+  const isVertical = computed("isVertical");
+  const isRtl = computed("isRtl");
+  const range = getRangeOffsets(params);
+  const offsetStyles = context.get("value").reduce((styles, value, index) => {
+    const offset = getThumbOffset(params, 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-transform": isVertical ? "translateY(50%)" : isRtl ? "translateX(50%)" : "translateX(-50%)",
     "--slider-range-start": range.start,
     "--slider-range-end": range.end
   };
 }
-function getMarkerStyle(ctx, value) {
+function getMarkerStyle(params, value) {
+  const { computed } = params;
+  const isHorizontal = computed("isHorizontal");
+  const isRtl = computed("isRtl");
   return {
-    // @ts-expect-error
-    visibility: getVisibility(ctx),
+    visibility: getVisibility(params),
     position: "absolute",
     pointerEvents: "none",
-    // @ts-expect-error
-    [ctx.isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset({ ...ctx, value }),
+    [isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset(params, value),
     translate: "var(--tx) var(--ty)",
-    "--tx": ctx.isHorizontal ? ctx.isRtl ? "50%" : "-50%" : "0%",
-    "--ty": !ctx.isHorizontal ? "50%" : "0%"
+    "--tx": isHorizontal ? isRtl ? "50%" : "-50%" : "0%",
+    "--ty": !isHorizontal ? "50%" : "0%"
   };
 }
 function getMarkerGroupStyle() {
@@ -132,119 +182,72 @@ function getMarkerGroupStyle() {
     position: "relative"
   };
 }
-var styleGetterFns = {
-  getRootStyle,
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
-  getMarkerStyle,
-  getMarkerGroupStyle
-};
-
-// src/slider.dom.ts
-var dom = createScope({
-  ...styleGetterFns,
-  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
-  getHiddenInputId: (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`,
-  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  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`,
-  getValueTextId: (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`,
-  getMarkerId: (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(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)),
-  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) return;
-    const relativePoint = getRelativePoint(point, controlEl);
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true }
-    });
-    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
-  },
-  dispatchChangeEvent(ctx) {
-    const valueArray = Array.from(ctx.value);
-    valueArray.forEach((value, index) => {
-      const inputEl = dom.getHiddenInputEl(ctx, index);
-      if (!inputEl) return;
-      dispatchInputValueEvent(inputEl, { value });
-    });
-  }
-});
-function normalizeValues(ctx, nextValues) {
-  return nextValues.map((value, index, values) => {
-    return constrainValue({ ...ctx, value: values }, value, index);
+function normalizeValues(params, nextValues) {
+  return nextValues.map((value, index) => {
+    return constrainValue(params, value, index);
   });
 }
-function getRangeAtIndex(ctx, index) {
-  return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
+function getRangeAtIndex(params, index) {
+  const { context, prop } = params;
+  return getValueRanges(context.get("value"), prop("min"), prop("max"), prop("minStepsBetweenThumbs"))[index];
 }
-function constrainValue(ctx, value, index) {
-  const range = getRangeAtIndex(ctx, index);
-  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+function constrainValue(params, value, index) {
+  const { prop } = params;
+  const range = getRangeAtIndex(params, index);
+  const snapValue = snapValueToStep(value, prop("min"), prop("max"), prop("step"));
   return clampValue(snapValue, range.min, range.max);
 }
-function decrement(ctx, index, step) {
-  const idx = index ?? ctx.focusedIndex;
-  const range = getRangeAtIndex(ctx, idx);
+function decrement(params, index, step) {
+  const { context, prop } = params;
+  const idx = index ?? context.get("focusedIndex");
+  const range = getRangeAtIndex(params, idx);
   const nextValues = getPreviousStepValue(idx, {
     ...range,
-    step: step ?? ctx.step,
-    values: ctx.value
+    step: step ?? prop("step"),
+    values: context.get("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);
+function increment(params, index, step) {
+  const { context, prop } = params;
+  const idx = index ?? context.get("focusedIndex");
+  const range = getRangeAtIndex(params, idx);
   const nextValues = getNextStepValue(idx, {
     ...range,
-    step: step ?? ctx.step,
-    values: ctx.value
+    step: step ?? prop("step"),
+    values: context.get("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;
-  }
+function getClosestIndex(params, pointValue) {
+  const { context } = params;
+  return getClosestValueIndex(context.get("value"), pointValue);
 }
 
 // src/slider.connect.ts
-function connect(state, send, normalize) {
-  const ariaLabel = state.context["aria-label"];
-  const ariaLabelledBy = state.context["aria-labelledby"];
-  const sliderValue = state.context.value;
+function connect(service, normalize) {
+  const { state, send, context, prop, computed, scope } = service;
+  const ariaLabel = prop("aria-label");
+  const ariaLabelledBy = prop("aria-labelledby");
+  const sliderValue = context.get("value");
+  const focusedIndex = context.get("focusedIndex");
   const focused = state.matches("focus");
   const dragging = state.matches("dragging");
-  const disabled = state.context.isDisabled;
-  const invalid = state.context.invalid;
-  const interactive = state.context.isInteractive;
-  const isHorizontal = state.context.orientation === "horizontal";
-  const isVertical = state.context.orientation === "vertical";
+  const disabled = computed("isDisabled");
+  const invalid = prop("invalid");
+  const interactive = computed("isInteractive");
+  const isHorizontal = prop("orientation") === "horizontal";
+  const isVertical = prop("orientation") === "vertical";
   function getValuePercentFn(value) {
-    return getValuePercent(value, state.context.min, state.context.max);
+    return getValuePercent(value, prop("min"), prop("max"));
   }
   function getPercentValueFn(percent) {
-    return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
+    return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
   }
   return {
-    value: state.context.value,
+    value: sliderValue,
     dragging,
     focused,
     setValue(value) {
@@ -266,10 +269,10 @@ function connect(state, send, normalize) {
       send({ type: "SET_VALUE", index, value });
     },
     getThumbMin(index) {
-      return getRangeAtIndex(state.context, index).min;
+      return getRangeAtIndex(service, index).min;
     },
     getThumbMax(index) {
-      return getRangeAtIndex(state.context, index).max;
+      return getRangeAtIndex(service, index).max;
     },
     increment(index) {
       send({ type: "INCREMENT", index });
@@ -284,18 +287,18 @@ function connect(state, send, normalize) {
     getLabelProps() {
       return normalize.label({
         ...parts.label.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-invalid": dataAttr(invalid),
         "data-dragging": dataAttr(dragging),
         "data-focus": dataAttr(focused),
-        id: dom.getLabelId(state.context),
-        htmlFor: dom.getHiddenInputId(state.context, 0),
+        id: getLabelId(scope),
+        htmlFor: getHiddenInputId(scope, 0),
         onClick(event) {
           if (!interactive) return;
           event.preventDefault();
-          dom.getFirstEl(state.context)?.focus();
+          getFirstEl(scope)?.focus();
         },
         style: {
           userSelect: "none",
@@ -307,35 +310,35 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.root.attrs,
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-dragging": dataAttr(dragging),
         "data-invalid": dataAttr(invalid),
         "data-focus": dataAttr(focused),
-        id: dom.getRootId(state.context),
-        dir: state.context.dir,
-        style: dom.getRootStyle(state.context)
+        id: getRootId(scope),
+        dir: prop("dir"),
+        style: getRootStyle(service)
       });
     },
     getValueTextProps() {
       return normalize.element({
         ...parts.valueText.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-invalid": dataAttr(invalid),
         "data-focus": dataAttr(focused),
-        id: dom.getValueTextId(state.context)
+        id: getValueTextId(scope)
       });
     },
     getTrackProps() {
       return normalize.element({
         ...parts.track.attrs,
-        dir: state.context.dir,
-        id: dom.getTrackId(state.context),
+        dir: prop("dir"),
+        id: getTrackId(scope),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
         "data-dragging": dataAttr(dragging),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-focus": dataAttr(focused),
         style: { position: "relative" }
       });
@@ -343,32 +346,32 @@ function connect(state, send, normalize) {
     getThumbProps(props2) {
       const { index = 0, name } = props2;
       const value = sliderValue[index];
-      const range = getRangeAtIndex(state.context, index);
-      const valueText = state.context.getAriaValueText?.({ value, index });
+      const range = getRangeAtIndex(service, index);
+      const valueText = prop("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,
+        dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        id: dom.getThumbId(state.context, index),
+        id: getThumbId(scope, index),
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
-        "data-focus": dataAttr(focused && state.context.focusedIndex === index),
-        "data-dragging": dataAttr(dragging && state.context.focusedIndex === index),
+        "data-orientation": prop("orientation"),
+        "data-focus": dataAttr(focused && focusedIndex === index),
+        "data-dragging": dataAttr(dragging && focusedIndex === index),
         draggable: false,
         "aria-disabled": ariaAttr(disabled),
         "aria-label": _ariaLabel,
-        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
-        "aria-orientation": state.context.orientation,
+        "aria-labelledby": _ariaLabelledBy ?? getLabelId(scope),
+        "aria-orientation": prop("orientation"),
         "aria-valuemax": range.max,
         "aria-valuemin": range.min,
         "aria-valuenow": sliderValue[index],
         "aria-valuetext": valueText,
         role: "slider",
         tabIndex: disabled ? void 0 : 0,
-        style: dom.getThumbStyle(state.context, index),
+        style: getThumbStyle(service, index),
         onPointerDown(event) {
           if (!interactive) return;
           send({ type: "THUMB_POINTER_DOWN", index });
@@ -376,7 +379,7 @@ function connect(state, send, normalize) {
         },
         onBlur() {
           if (!interactive) return;
-          send("BLUR");
+          send({ type: "BLUR" });
         },
         onFocus() {
           if (!interactive) return;
@@ -385,7 +388,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = getEventStep(event) * state.context.step;
+          const step = getEventStep(event) * prop("step");
           const keyMap = {
             ArrowUp() {
               if (isHorizontal) return;
@@ -410,13 +413,16 @@ function connect(state, send, normalize) {
               send({ type: "ARROW_DEC", step, src: "PageDown" });
             },
             Home() {
-              send("HOME");
+              send({ type: "HOME" });
             },
             End() {
-              send("END");
+              send({ type: "END" });
             }
           };
-          const key = getEventKey(event, state.context);
+          const key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation: prop("orientation")
+          });
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -429,38 +435,38 @@ function connect(state, send, normalize) {
     getHiddenInputProps(props2) {
       const { index = 0, name } = props2;
       return normalize.input({
-        name: name ?? (state.context.name ? state.context.name + (state.context.value.length > 1 ? "[]" : "") : void 0),
-        form: state.context.form,
+        name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
+        form: prop("form"),
         type: "text",
         hidden: true,
-        defaultValue: state.context.value[index],
-        id: dom.getHiddenInputId(state.context, index)
+        defaultValue: sliderValue[index],
+        id: getHiddenInputId(scope, index)
       });
     },
     getRangeProps() {
       return normalize.element({
-        id: dom.getRangeId(state.context),
+        id: getRangeId(scope),
         ...parts.range.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-dragging": dataAttr(dragging),
         "data-focus": dataAttr(focused),
         "data-invalid": dataAttr(invalid),
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
-        style: dom.getRangeStyle(state.context)
+        "data-orientation": prop("orientation"),
+        style: getRangeStyle(service)
       });
     },
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
-        dir: state.context.dir,
-        id: dom.getControlId(state.context),
+        dir: prop("dir"),
+        id: getControlId(scope),
         "data-dragging": dataAttr(dragging),
         "data-disabled": dataAttr(disabled),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-invalid": dataAttr(invalid),
         "data-focus": dataAttr(focused),
-        style: dom.getControlStyle(),
+        style: getControlStyle(),
         onPointerDown(event) {
           if (!interactive) return;
           if (!isLeftClick(event)) return;
@@ -476,30 +482,28 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.markerGroup.attrs,
         role: "presentation",
-        dir: state.context.dir,
+        dir: prop("dir"),
         "aria-hidden": true,
-        "data-orientation": state.context.orientation,
-        style: dom.getMarkerGroupStyle()
+        "data-orientation": prop("orientation"),
+        style: getMarkerGroupStyle()
       });
     },
     getMarkerProps(props2) {
-      const style = dom.getMarkerStyle(state.context, props2.value);
+      const style = getMarkerStyle(service, props2.value);
       let markerState;
-      const first = state.context.value[0];
-      const last = state.context.value[state.context.value.length - 1];
-      if (props2.value < first) {
+      if (props2.value < first(sliderValue)) {
         markerState = "under-value";
-      } else if (props2.value > last) {
+      } else if (props2.value > last(sliderValue)) {
         markerState = "over-value";
       } else {
         markerState = "at-value";
       }
       return normalize.element({
         ...parts.marker.attrs,
-        id: dom.getMarkerId(state.context, props2.value),
+        id: getMarkerId(scope, props2.value),
         role: "presentation",
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
         "data-value": props2.value,
         "data-disabled": dataAttr(disabled),
         "data-state": markerState,
@@ -508,15 +512,15 @@ function connect(state, send, normalize) {
     },
     getDraggingIndicatorProps(props2) {
       const { index = 0 } = props2;
-      const isDragging = index === state.context.focusedIndex && dragging;
+      const isDragging = index === focusedIndex && dragging;
       return normalize.element({
         ...parts.draggingIndicator.attrs,
         role: "presentation",
-        dir: state.context.dir,
+        dir: prop("dir"),
         hidden: !isDragging,
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         "data-state": isDragging ? "open" : "closed",
-        style: dom.getThumbStyle(state.context, index)
+        style: getThumbStyle(service, index)
       });
     }
   };
@@ -524,260 +528,260 @@ function connect(state, send, normalize) {
 var isEqualSize = (a, b) => {
   return a?.width === b?.width && a?.height === b?.height;
 };
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "slider",
-      initial: "idle",
-      context: {
-        thumbSize: null,
-        thumbAlignment: "contain",
-        min: 0,
-        max: 100,
-        step: 1,
-        value: [0],
-        origin: "start",
-        orientation: "horizontal",
-        dir: "ltr",
-        minStepsBetweenThumbs: 0,
-        disabled: false,
-        readOnly: false,
-        ...ctx,
-        focusedIndex: -1,
-        fieldsetDisabled: false
-      },
-      computed: {
-        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.readOnly || ctx2.isDisabled),
-        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
-        valuePercent(ctx2) {
-          return ctx2.value.map((value) => 100 * getValuePercent(value, ctx2.min, ctx2.max));
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      dir: "ltr",
+      thumbAlignment: "contain",
+      min: 0,
+      max: 100,
+      step: 1,
+      defaultValue: [0],
+      origin: "start",
+      orientation: "horizontal",
+      minStepsBetweenThumbs: 0,
+      ...compact(props2)
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getContext, scope }) {
+    return {
+      thumbSize: bindable(() => ({
+        defaultValue: prop("thumbSize") || null
+      })),
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+          dispatchChangeEvent(scope, value);
         }
-      },
-      watch: {
-        value: ["syncInputElements"]
-      },
-      entry: ["coarseValue"],
-      activities: ["trackFormControlState", "trackThumbsSize"],
-      on: {
-        SET_VALUE: [
-          {
-            guard: "hasIndex",
-            actions: "setValueAtIndex"
-          },
-          { actions: "setValue" }
-        ],
-        INCREMENT: {
-          actions: "incrementThumbAtIndex"
-        },
-        DECREMENT: {
-          actions: "decrementThumbAtIndex"
+      })),
+      focusedIndex: bindable(() => ({
+        defaultValue: -1,
+        onChange(value) {
+          const ctx = getContext();
+          prop("onFocusChange")?.({ focusedIndex: value, value: ctx.get("value") });
         }
+      })),
+      fieldsetDisabled: bindable(() => ({
+        defaultValue: false
+      }))
+    };
+  },
+  computed: {
+    isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+    isVertical: ({ prop }) => prop("orientation") === "vertical",
+    isRtl: ({ prop }) => prop("orientation") === "horizontal" && prop("dir") === "rtl",
+    isDisabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+    isInteractive: ({ prop, computed }) => !(prop("readOnly") || computed("isDisabled")),
+    hasMeasuredThumbSize: ({ context }) => context.get("thumbSize") != null,
+    valuePercent({ context, prop }) {
+      return context.get("value").map((value) => 100 * getValuePercent(value, prop("min"), prop("max")));
+    }
+  },
+  watch({ track, action, context }) {
+    track([() => context.get("value").join(",")], () => {
+      action(["syncInputElements"]);
+    });
+  },
+  entry: ["coarseValue"],
+  effects: ["trackFormControlState", "trackThumbsSize"],
+  on: {
+    SET_VALUE: [
+      {
+        guard: "hasIndex",
+        actions: ["setValueAtIndex"]
       },
-      states: {
-        idle: {
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
-            },
-            FOCUS: {
-              target: "focus",
-              actions: "setFocusedIndex"
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"]
-            }
-          }
-        },
-        focus: {
-          entry: "focusActiveThumb",
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"]
-            },
-            ARROW_DEC: {
-              actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
-            },
-            ARROW_INC: {
-              actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
-            },
-            HOME: {
-              actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
-            },
-            END: {
-              actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
-            },
-            BLUR: {
-              target: "idle",
-              actions: "clearFocusedIndex"
-            }
-          }
-        },
-        dragging: {
-          entry: "focusActiveThumb",
-          activities: "trackPointerMove",
-          on: {
-            POINTER_UP: {
-              target: "focus",
-              actions: "invokeOnChangeEnd"
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue"
-            }
-          }
-        }
+      {
+        actions: ["setValue"]
       }
+    ],
+    INCREMENT: {
+      actions: ["incrementThumbAtIndex"]
     },
-    {
-      guards: {
-        hasIndex: (_ctx, evt) => evt.index != null
-      },
-      activities: {
-        trackFormControlState(ctx2, _evt, { initialContext }) {
-          return trackFormControl(dom.getRootEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              set.value(ctx2, initialContext.value);
-            }
-          });
+    DECREMENT: {
+      actions: ["decrementThumbAtIndex"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
         },
-        trackPointerMove(ctx2, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx2), {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point });
-            },
-            onPointerUp() {
-              send("POINTER_UP");
-            }
-          });
+        FOCUS: {
+          target: "focus",
+          actions: ["setFocusedIndex"]
         },
-        trackThumbsSize(ctx2) {
-          if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize) return;
-          return trackElementsSize({
-            getNodes: () => dom.getElements(ctx2),
-            observeMutation: true,
-            callback(size) {
-              if (!size || isEqualSize(ctx2.thumbSize, size)) return;
-              ctx2.thumbSize = size;
-            }
-          });
+        THUMB_POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         }
-      },
-      actions: {
-        syncInputElements(ctx2) {
-          ctx2.value.forEach((value, index) => {
-            const inputEl = dom.getHiddenInputEl(ctx2, index);
-            dom.setValue(inputEl, value);
-          });
-        },
-        invokeOnChangeEnd(ctx2) {
-          invoke.valueChangeEnd(ctx2);
-        },
-        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 pointerValue = dom.getValueFromPoint(ctx2, evt.point);
-          if (pointerValue == null) return;
-          const value = constrainValue(ctx2, pointerValue, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, value);
-        },
-        focusActiveThumb(ctx2) {
-          raf(() => {
-            const thumbEl = dom.getThumbEl(ctx2, ctx2.focusedIndex);
-            thumbEl?.focus({ preventScroll: true });
-          });
+      }
+    },
+    focus: {
+      entry: ["focusActiveThumb"],
+      on: {
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
         },
-        decrementThumbAtIndex(ctx2, evt) {
-          const value = decrement(ctx2, evt.index, evt.step);
-          set.value(ctx2, value);
+        THUMB_POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         },
-        incrementThumbAtIndex(ctx2, evt) {
-          const value = increment(ctx2, evt.index, evt.step);
-          set.value(ctx2, value);
+        ARROW_DEC: {
+          actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
         },
-        setFocusedThumbToMin(ctx2) {
-          const { min } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, min);
+        ARROW_INC: {
+          actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
         },
-        setFocusedThumbToMax(ctx2) {
-          const { max } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, max);
+        HOME: {
+          actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
         },
-        coarseValue(ctx2) {
-          const value = normalizeValues(ctx2, ctx2.value);
-          set.value(ctx2, value);
+        END: {
+          actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
         },
-        setValueAtIndex(ctx2, evt) {
-          const value = constrainValue(ctx2, evt.value, evt.index);
-          set.valueAtIndex(ctx2, evt.index, value);
+        BLUR: {
+          target: "idle",
+          actions: ["clearFocusedIndex"]
+        }
+      }
+    },
+    dragging: {
+      entry: ["focusActiveThumb"],
+      effects: ["trackPointerMove"],
+      on: {
+        POINTER_UP: {
+          target: "focus",
+          actions: ["invokeOnChangeEnd"]
         },
-        setValue(ctx2, evt) {
-          const value = normalizeValues(ctx2, evt.value);
-          set.value(ctx2, value);
+        POINTER_MOVE: {
+          actions: ["setPointerValue"]
         }
       }
     }
-  );
-}
-var invoke = {
-  valueChange(ctx) {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value)
-    });
-    dom.dispatchChangeEvent(ctx);
-  },
-  valueChangeEnd(ctx) {
-    ctx.onValueChangeEnd?.({
-      value: Array.from(ctx.value)
-    });
-  },
-  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.valueChange(ctx);
-  },
-  value: (ctx, value) => {
-    if (isEqual(ctx.value, value)) return;
-    assignArray(ctx.value, value);
-    invoke.valueChange(ctx);
   },
-  focusedIndex: (ctx, index) => {
-    if (isEqual(ctx.focusedIndex, index)) return;
-    ctx.focusedIndex = index;
-    invoke.focusChange(ctx);
+  implementations: {
+    guards: {
+      hasIndex: ({ event }) => event.index != null
+    },
+    effects: {
+      trackFormControlState({ context, scope }) {
+        return trackFormControl(getRootEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      },
+      trackPointerMove({ scope, send }) {
+        return trackPointerMove(scope.getDoc(), {
+          onPointerMove(info) {
+            send({ type: "POINTER_MOVE", point: info.point });
+          },
+          onPointerUp() {
+            send({ type: "POINTER_UP" });
+          }
+        });
+      },
+      trackThumbsSize({ context, scope, prop }) {
+        if (prop("thumbAlignment") !== "contain" || context.get("thumbSize")) return;
+        return trackElementsSize({
+          getNodes: () => getElements(scope),
+          observeMutation: true,
+          callback(size) {
+            if (!size || isEqualSize(context.get("thumbSize"), size)) return;
+            context.set("thumbSize", size);
+          }
+        });
+      }
+    },
+    actions: {
+      syncInputElements({ context, scope }) {
+        context.get("value").forEach((value, index) => {
+          const inputEl = getHiddenInputEl(scope, index);
+          setElementValue(inputEl, value.toString());
+        });
+      },
+      invokeOnChangeEnd({ prop, context }) {
+        prop("onValueChangeEnd")?.({ value: context.get("value") });
+      },
+      setClosestThumbIndex(params) {
+        const { context, event } = params;
+        const pointValue = getValueFromPoint(params, event.point);
+        if (pointValue == null) return;
+        const focusedIndex = getClosestIndex(params, pointValue);
+        context.set("focusedIndex", focusedIndex);
+      },
+      setFocusedIndex({ context, event }) {
+        context.set("focusedIndex", event.index);
+      },
+      clearFocusedIndex({ context }) {
+        context.set("focusedIndex", -1);
+      },
+      setPointerValue(params) {
+        queueMicrotask(() => {
+          const { context, event } = params;
+          const pointValue = getValueFromPoint(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));
+        });
+      },
+      focusActiveThumb({ scope, context }) {
+        raf(() => {
+          const thumbEl = getThumbEl(scope, context.get("focusedIndex"));
+          thumbEl?.focus({ preventScroll: true });
+        });
+      },
+      decrementThumbAtIndex(params) {
+        const { context, event } = params;
+        const value = decrement(params, event.index, event.step);
+        context.set("value", value);
+      },
+      incrementThumbAtIndex(params) {
+        const { context, event } = params;
+        const value = increment(params, event.index, event.step);
+        context.set("value", value);
+      },
+      setFocusedThumbToMin(params) {
+        const { context } = params;
+        const index = context.get("focusedIndex");
+        const { min } = getRangeAtIndex(params, index);
+        context.set("value", (prev) => setValueAtIndex(prev, index, min));
+      },
+      setFocusedThumbToMax(params) {
+        const { context } = params;
+        const index = context.get("focusedIndex");
+        const { max } = getRangeAtIndex(params, index);
+        context.set("value", (prev) => setValueAtIndex(prev, index, max));
+      },
+      coarseValue(params) {
+        const { context } = params;
+        const value = normalizeValues(params, context.get("value"));
+        context.set("value", value);
+      },
+      setValueAtIndex(params) {
+        const { context, event } = params;
+        const value = constrainValue(params, event.value, event.index);
+        context.set("value", (prev) => setValueAtIndex(prev, event.index, value));
+      },
+      setValue(params) {
+        const { context, event } = params;
+        const value = normalizeValues(params, event.value);
+        context.set("value", value);
+      }
+    }
   }
-};
+});
 var props = createProps()([
   "aria-label",
   "aria-labelledby",
@@ -803,7 +807,8 @@ var props = createProps()([
   "thumbAlignment",
   "thumbAlignment",
   "thumbSize",
-  "value"
+  "value",
+  "defaultValue"
 ]);
 var splitProps = createSplitProps(props);
 var thumbProps = createProps()(["index", "name"]);