@zag-js/slider 1.43.0 → 2.0.0-next.1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './slider.anatomy.mjs';
 export { connect } from './slider.connect.mjs';
 export { machine } from './slider.machine.mjs';
 export { markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps } from './slider.props.mjs';
-export { SliderApi as Api, DraggingIndicatorProps, ElementIds, FocusChangeDetails, SliderMachine as Machine, MarkerProps, SliderProps as Props, SliderService as Service, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ValueChangeDetails, ValueTextDetails } from './slider.types.mjs';
+export { SliderApi as Api, DraggingIndicatorProps, ElementIds, FocusChangeDetails, SliderMachine as Machine, MarkerProps, MarkerState, SliderProps as Props, RootState, SliderService as Service, SliderOrigin, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ThumbState, ValueChangeDetails, ValueTextDetails } from './slider.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './slider.anatomy.js';
 export { connect } from './slider.connect.js';
 export { machine } from './slider.machine.js';
 export { markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps } from './slider.props.js';
-export { SliderApi as Api, DraggingIndicatorProps, ElementIds, FocusChangeDetails, SliderMachine as Machine, MarkerProps, SliderProps as Props, SliderService as Service, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ValueChangeDetails, ValueTextDetails } from './slider.types.js';
+export { SliderApi as Api, DraggingIndicatorProps, ElementIds, FocusChangeDetails, SliderMachine as Machine, MarkerProps, MarkerState, SliderProps as Props, RootState, SliderService as Service, SliderOrigin, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ThumbState, ValueChangeDetails, ValueTextDetails } from './slider.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/slider.connect.js

@@ -48,7 +48,7 @@ function connect(service, normalize) {
   const focused = state.matches("focus");
   const dragging = state.matches("dragging");
   const disabled = computed("isDisabled");
-  const invalid = prop("invalid");
+  const invalid = !!prop("invalid");
   const interactive = computed("isInteractive");
   const isHorizontal = prop("orientation") === "horizontal";
   const isVertical = prop("orientation") === "vertical";
@@ -58,6 +58,31 @@ function connect(service, normalize) {
   function getPercentValueFn(percent) {
     return (0, import_utils.getPercentValue)(percent, prop("min"), prop("max"), prop("step"));
   }
+  function getRootState() {
+    return { disabled, invalid, dragging, focused, orientation: prop("orientation") };
+  }
+  function getThumbState(props) {
+    const { index } = props;
+    return {
+      index,
+      value: sliderValue[index],
+      disabled,
+      focused: focused && focusedIndex === index,
+      dragging: dragging && focusedIndex === index
+    };
+  }
+  function getMarkerState(props) {
+    const { value } = props;
+    let markerState;
+    if (value < (0, import_utils.first)(sliderValue)) {
+      markerState = "under-value";
+    } else if (value > (0, import_utils.last)(sliderValue)) {
+      markerState = "over-value";
+    } else {
+      markerState = "at-value";
+    }
+    return { value, disabled, state: markerState };
+  }
   return {
     value: sliderValue,
     dragging,
@@ -96,15 +121,17 @@ function connect(service, normalize) {
       if (!interactive) return;
       send({ type: "FOCUS", index: 0 });
     },
+    getRootState,
     getLabelProps() {
+      const rootState = getRootState();
       return normalize.label({
-        ...import_slider.parts.label.attrs,
+        ...import_slider.parts.label.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-dragging": (0, import_dom_query.dataAttr)(rootState.dragging),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
         id: dom.getLabelId(scope),
         htmlFor: dom.getHiddenInputId(scope, 0),
         onClick(event) {
@@ -119,70 +146,70 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_slider.parts.root.attrs,
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-orientation": prop("orientation"),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        id: dom.getRootId(scope),
+        ...import_slider.parts.root.attrs(scope.id),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-dragging": (0, import_dom_query.dataAttr)(rootState.dragging),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
         dir: prop("dir"),
         style: (0, import_slider2.getRootStyle)(service)
       });
     },
     getValueTextProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_slider.parts.valueText.attrs,
+        ...import_slider.parts.valueText.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        id: dom.getValueTextId(scope)
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused)
       });
     },
     getTrackProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_slider.parts.track.attrs,
+        ...import_slider.parts.track.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getTrackId(scope),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        "data-orientation": prop("orientation"),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-dragging": (0, import_dom_query.dataAttr)(rootState.dragging),
+        "data-orientation": rootState.orientation,
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
         style: { position: "relative" }
       });
     },
+    getThumbState,
     getThumbProps(props) {
       const { index = 0, name } = props;
-      const value = sliderValue[index];
+      const thumbState = getThumbState({ index, name });
       const range = (0, import_slider3.getRangeAtIndex)(service, index);
-      const valueText = prop("getAriaValueText")?.({ value, index });
+      const valueText = prop("getAriaValueText")?.({ value: thumbState.value, index });
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
       return normalize.element({
-        ...import_slider.parts.thumb.attrs,
+        ...import_slider.parts.thumb.attrs(scope.id),
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        id: dom.getThumbId(scope, index),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-disabled": (0, import_dom_query.dataAttr)(thumbState.disabled),
         "data-orientation": prop("orientation"),
-        "data-focus": (0, import_dom_query.dataAttr)(focused && focusedIndex === index),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging && focusedIndex === index),
+        "data-focus": (0, import_dom_query.dataAttr)(thumbState.focused),
+        "data-dragging": (0, import_dom_query.dataAttr)(thumbState.dragging),
         draggable: false,
-        "aria-disabled": (0, import_dom_query.ariaAttr)(disabled),
+        "aria-disabled": (0, import_dom_query.ariaAttr)(thumbState.disabled),
         "aria-label": _ariaLabel,
         "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(scope),
         "aria-orientation": prop("orientation"),
         "aria-valuemax": range.max,
         "aria-valuemin": range.min,
-        "aria-valuenow": sliderValue[index],
+        "aria-valuenow": thumbState.value,
         "aria-valuetext": valueText,
         role: "slider",
-        tabIndex: disabled ? void 0 : 0,
+        tabIndex: thumbState.disabled ? void 0 : 0,
         style: (0, import_slider2.getThumbStyle)(service, index),
         onPointerDown(event) {
           if (!interactive) return;
@@ -257,38 +284,39 @@ function connect(service, normalize) {
     },
     getHiddenInputProps(props) {
       const { index = 0, name } = props;
+      const thumbState = getThumbState({ index, name });
       return normalize.input({
         name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
         form: prop("form"),
         type: "text",
         hidden: true,
-        defaultValue: sliderValue[index],
+        defaultValue: thumbState.value,
         id: dom.getHiddenInputId(scope, index)
       });
     },
     getRangeProps() {
+      const rootState = getRootState();
       return normalize.element({
-        id: dom.getRangeId(scope),
-        ...import_slider.parts.range.attrs,
+        ...import_slider.parts.range.attrs(scope.id),
         dir: prop("dir"),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-orientation": prop("orientation"),
+        "data-dragging": (0, import_dom_query.dataAttr)(rootState.dragging),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-orientation": rootState.orientation,
         style: (0, import_slider2.getRangeStyle)(service)
       });
     },
     getControlProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...import_slider.parts.control.attrs,
+        ...import_slider.parts.control.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getControlId(scope),
-        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-dragging": (0, import_dom_query.dataAttr)(rootState.dragging),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
         style: (0, import_slider2.getControlStyle)(),
         onPointerDown(event) {
           if (!interactive) return;
@@ -303,7 +331,7 @@ function connect(service, normalize) {
     },
     getMarkerGroupProps() {
       return normalize.element({
-        ...import_slider.parts.markerGroup.attrs,
+        ...import_slider.parts.markerGroup.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "aria-hidden": true,
@@ -311,38 +339,31 @@ function connect(service, normalize) {
         style: (0, import_slider2.getMarkerGroupStyle)()
       });
     },
+    getMarkerState,
     getMarkerProps(props) {
       const style = (0, import_slider2.getMarkerStyle)(service, props.value);
-      let markerState;
-      if (props.value < (0, import_utils.first)(sliderValue)) {
-        markerState = "under-value";
-      } else if (props.value > (0, import_utils.last)(sliderValue)) {
-        markerState = "over-value";
-      } else {
-        markerState = "at-value";
-      }
+      const markerState = getMarkerState(props);
       return normalize.element({
-        ...import_slider.parts.marker.attrs,
-        id: dom.getMarkerId(scope, props.value),
+        ...import_slider.parts.marker.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
-        "data-value": props.value,
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-state": markerState,
+        "data-value": markerState.value,
+        "data-disabled": (0, import_dom_query.dataAttr)(markerState.disabled),
+        "data-state": markerState.state,
         style
       });
     },
     getDraggingIndicatorProps(props) {
       const { index = 0 } = props;
-      const isDragging = index === focusedIndex && dragging;
+      const thumbState = getThumbState({ index });
       return normalize.element({
-        ...import_slider.parts.draggingIndicator.attrs,
+        ...import_slider.parts.draggingIndicator.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
-        hidden: !isDragging,
+        hidden: !thumbState.dragging,
         "data-orientation": prop("orientation"),
-        "data-state": isDragging ? "open" : "closed",
+        "data-state": thumbState.dragging ? "open" : "closed",
         style: (0, import_slider2.getThumbStyle)(service, index)
       });
     }

package/dist/slider.connect.mjs

@@ -29,7 +29,7 @@ function connect(service, normalize) {
   const focused = state.matches("focus");
   const dragging = state.matches("dragging");
   const disabled = computed("isDisabled");
-  const invalid = prop("invalid");
+  const invalid = !!prop("invalid");
   const interactive = computed("isInteractive");
   const isHorizontal = prop("orientation") === "horizontal";
   const isVertical = prop("orientation") === "vertical";
@@ -39,6 +39,31 @@ function connect(service, normalize) {
   function getPercentValueFn(percent) {
     return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
   }
+  function getRootState() {
+    return { disabled, invalid, dragging, focused, orientation: prop("orientation") };
+  }
+  function getThumbState(props) {
+    const { index } = props;
+    return {
+      index,
+      value: sliderValue[index],
+      disabled,
+      focused: focused && focusedIndex === index,
+      dragging: dragging && focusedIndex === index
+    };
+  }
+  function getMarkerState(props) {
+    const { value } = props;
+    let markerState;
+    if (value < first(sliderValue)) {
+      markerState = "under-value";
+    } else if (value > last(sliderValue)) {
+      markerState = "over-value";
+    } else {
+      markerState = "at-value";
+    }
+    return { value, disabled, state: markerState };
+  }
   return {
     value: sliderValue,
     dragging,
@@ -77,15 +102,17 @@ function connect(service, normalize) {
       if (!interactive) return;
       send({ type: "FOCUS", index: 0 });
     },
+    getRootState,
     getLabelProps() {
+      const rootState = getRootState();
       return normalize.label({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": dataAttr(invalid),
-        "data-dragging": dataAttr(dragging),
-        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-dragging": dataAttr(rootState.dragging),
+        "data-focus": dataAttr(rootState.focused),
         id: dom.getLabelId(scope),
         htmlFor: dom.getHiddenInputId(scope, 0),
         onClick(event) {
@@ -100,70 +127,70 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.root.attrs,
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-dragging": dataAttr(dragging),
-        "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused),
-        id: dom.getRootId(scope),
+        ...parts.root.attrs(scope.id),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-dragging": dataAttr(rootState.dragging),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-focus": dataAttr(rootState.focused),
         dir: prop("dir"),
         style: getRootStyle(service)
       });
     },
     getValueTextProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.valueText.attrs,
+        ...parts.valueText.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused),
-        id: dom.getValueTextId(scope)
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-focus": dataAttr(rootState.focused)
       });
     },
     getTrackProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.track.attrs,
+        ...parts.track.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getTrackId(scope),
-        "data-disabled": dataAttr(disabled),
-        "data-invalid": dataAttr(invalid),
-        "data-dragging": dataAttr(dragging),
-        "data-orientation": prop("orientation"),
-        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-dragging": dataAttr(rootState.dragging),
+        "data-orientation": rootState.orientation,
+        "data-focus": dataAttr(rootState.focused),
         style: { position: "relative" }
       });
     },
+    getThumbState,
     getThumbProps(props) {
       const { index = 0, name } = props;
-      const value = sliderValue[index];
+      const thumbState = getThumbState({ index, name });
       const range = getRangeAtIndex(service, index);
-      const valueText = prop("getAriaValueText")?.({ value, index });
+      const valueText = prop("getAriaValueText")?.({ value: thumbState.value, index });
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
       return normalize.element({
-        ...parts.thumb.attrs,
+        ...parts.thumb.attrs(scope.id),
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        id: dom.getThumbId(scope, index),
-        "data-disabled": dataAttr(disabled),
+        "data-disabled": dataAttr(thumbState.disabled),
         "data-orientation": prop("orientation"),
-        "data-focus": dataAttr(focused && focusedIndex === index),
-        "data-dragging": dataAttr(dragging && focusedIndex === index),
+        "data-focus": dataAttr(thumbState.focused),
+        "data-dragging": dataAttr(thumbState.dragging),
         draggable: false,
-        "aria-disabled": ariaAttr(disabled),
+        "aria-disabled": ariaAttr(thumbState.disabled),
         "aria-label": _ariaLabel,
         "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(scope),
         "aria-orientation": prop("orientation"),
         "aria-valuemax": range.max,
         "aria-valuemin": range.min,
-        "aria-valuenow": sliderValue[index],
+        "aria-valuenow": thumbState.value,
         "aria-valuetext": valueText,
         role: "slider",
-        tabIndex: disabled ? void 0 : 0,
+        tabIndex: thumbState.disabled ? void 0 : 0,
         style: getThumbStyle(service, index),
         onPointerDown(event) {
           if (!interactive) return;
@@ -238,38 +265,39 @@ function connect(service, normalize) {
     },
     getHiddenInputProps(props) {
       const { index = 0, name } = props;
+      const thumbState = getThumbState({ index, name });
       return normalize.input({
         name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
         form: prop("form"),
         type: "text",
         hidden: true,
-        defaultValue: sliderValue[index],
+        defaultValue: thumbState.value,
         id: dom.getHiddenInputId(scope, index)
       });
     },
     getRangeProps() {
+      const rootState = getRootState();
       return normalize.element({
-        id: dom.getRangeId(scope),
-        ...parts.range.attrs,
+        ...parts.range.attrs(scope.id),
         dir: prop("dir"),
-        "data-dragging": dataAttr(dragging),
-        "data-focus": dataAttr(focused),
-        "data-invalid": dataAttr(invalid),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
+        "data-dragging": dataAttr(rootState.dragging),
+        "data-focus": dataAttr(rootState.focused),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-orientation": rootState.orientation,
         style: getRangeStyle(service)
       });
     },
     getControlProps() {
+      const rootState = getRootState();
       return normalize.element({
-        ...parts.control.attrs,
+        ...parts.control.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getControlId(scope),
-        "data-dragging": dataAttr(dragging),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused),
+        "data-dragging": dataAttr(rootState.dragging),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-orientation": rootState.orientation,
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-focus": dataAttr(rootState.focused),
         style: getControlStyle(),
         onPointerDown(event) {
           if (!interactive) return;
@@ -284,7 +312,7 @@ function connect(service, normalize) {
     },
     getMarkerGroupProps() {
       return normalize.element({
-        ...parts.markerGroup.attrs,
+        ...parts.markerGroup.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "aria-hidden": true,
@@ -292,38 +320,31 @@ function connect(service, normalize) {
         style: getMarkerGroupStyle()
       });
     },
+    getMarkerState,
     getMarkerProps(props) {
       const style = getMarkerStyle(service, props.value);
-      let markerState;
-      if (props.value < first(sliderValue)) {
-        markerState = "under-value";
-      } else if (props.value > last(sliderValue)) {
-        markerState = "over-value";
-      } else {
-        markerState = "at-value";
-      }
+      const markerState = getMarkerState(props);
       return normalize.element({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(scope, props.value),
+        ...parts.marker.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
-        "data-value": props.value,
-        "data-disabled": dataAttr(disabled),
-        "data-state": markerState,
+        "data-value": markerState.value,
+        "data-disabled": dataAttr(markerState.disabled),
+        "data-state": markerState.state,
         style
       });
     },
     getDraggingIndicatorProps(props) {
       const { index = 0 } = props;
-      const isDragging = index === focusedIndex && dragging;
+      const thumbState = getThumbState({ index });
       return normalize.element({
-        ...parts.draggingIndicator.attrs,
+        ...parts.draggingIndicator.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
-        hidden: !isDragging,
+        hidden: !thumbState.dragging,
         "data-orientation": prop("orientation"),
-        "data-state": isDragging ? "open" : "closed",
+        "data-state": thumbState.dragging ? "open" : "closed",
         style: getThumbStyle(service, index)
       });
     }

package/dist/slider.dom.js

@@ -43,22 +43,23 @@ __export(slider_dom_exports, {
 module.exports = __toCommonJS(slider_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
-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 getThumbEls = (ctx) => (0, import_dom_query.queryAll)(getControlEl(ctx), "[role=slider]");
+var import_slider = require("./slider.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.root));
+var getThumbEl = (ctx, index) => ctx.query(`${ctx.selector(import_slider.parts.thumb)}[data-index="${index}"]`);
+var getThumbEls = (ctx) => ctx.queryAll(ctx.selector(import_slider.parts.thumb));
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
-var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getControlEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.control));
+var getRangeEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.range));
 var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
   const isContain = thumbAlignment === "contain";
   const isVertical = orientation === "vertical";

package/dist/slider.dom.mjs

@@ -1,22 +1,23 @@
 // src/slider.dom.ts
-import { dispatchInputValueEvent, queryAll } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/dom-query";
 import { clampPercent, getPercentValue } from "@zag-js/utils";
-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 getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+import { parts } from "./slider.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+var getThumbEl = (ctx, index) => ctx.query(`${ctx.selector(parts.thumb)}[data-index="${index}"]`);
+var getThumbEls = (ctx) => ctx.queryAll(ctx.selector(parts.thumb));
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
-var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getControlEl = (ctx) => ctx.query(ctx.selector(parts.control));
+var getRangeEl = (ctx) => ctx.query(ctx.selector(parts.range));
 var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
   const isContain = thumbAlignment === "contain";
   const isVertical = orientation === "vertical";

package/dist/slider.style.js

@@ -32,6 +32,7 @@ __export(slider_style_exports, {
 });
 module.exports = __toCommonJS(slider_style_exports);
 var import_utils = require("@zag-js/utils");
+var import_slider = require("./slider.utils.js");
 function getBounds(value) {
   const firstValue = value[0];
   const lastThumb = value[value.length - 1];
@@ -42,16 +43,9 @@ function getRangeOffsets(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 };
-    }
-    if (prop("origin") === "end") {
-      return { start: `${lastPercent}%`, end: "0%" };
-    }
-    return { start: "0%", end: `${100 - lastPercent}%` };
+    const originPercent = (0, import_slider.getOriginPercent)(prop("origin"), prop("min"), prop("max"));
+    const { start, end } = (0, import_slider.getFillRange)(valuePercent[0], originPercent);
+    return { start: `${start}%`, end: `${end}%` };
   }
   return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
 }

package/dist/slider.style.mjs

@@ -1,5 +1,6 @@
 // src/slider.style.ts
 import { getValuePercent, getValueTransformer, toPx } from "@zag-js/utils";
+import { getFillRange, getOriginPercent } from "./slider.utils.mjs";
 function getBounds(value) {
   const firstValue = value[0];
   const lastThumb = value[value.length - 1];
@@ -10,16 +11,9 @@ function getRangeOffsets(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 };
-    }
-    if (prop("origin") === "end") {
-      return { start: `${lastPercent}%`, end: "0%" };
-    }
-    return { start: "0%", end: `${100 - lastPercent}%` };
+    const originPercent = getOriginPercent(prop("origin"), prop("min"), prop("max"));
+    const { start, end } = getFillRange(valuePercent[0], originPercent);
+    return { start: `${start}%`, end: `${end}%` };
   }
   return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
 }

package/dist/slider.types.d.mts

@@ -3,6 +3,7 @@ import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag
 
 type ThumbCollisionBehavior = "none" | "push" | "swap";
 type ThumbAlignment = "contain" | "center";
+type SliderOrigin = "start" | "center" | "end" | number;
 interface ValueChangeDetails {
     value: number[];
 }
@@ -121,15 +122,14 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "vertical" | "horizontal" | undefined;
     /**
-     * The origin of the slider range. The track is filled from the origin
-     * to the thumb for single values.
-     * - "start": Useful when the value represents an absolute value
-     * - "center": Useful when the value represents an offset (relative)
-     * - "end": Useful when the value represents an offset from the end
+     * The origin of the slider range. The track is filled from the origin to the thumb.
+     * - `"start"` / `"end"`: fill from `min` / `max`
+     * - `"center"`: fill from the midpoint of `min`/`max`
+     * - a `number`: fill from that value instead, for when the neutral point isn't the midpoint
      *
      * @default "start"
      */
-    origin?: "start" | "center" | "end" | undefined;
+    origin?: SliderOrigin | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -242,13 +242,71 @@ interface Size {
 interface MarkerProps {
     value: number;
 }
+interface MarkerState {
+    /**
+     * The value of the marker
+     */
+    value: number;
+    /**
+     * Whether the marker is disabled
+     */
+    disabled: boolean;
+    /**
+     * The state of the marker relative to the slider value
+     */
+    state: "under-value" | "over-value" | "at-value";
+}
 interface ThumbProps {
     index: number;
     name?: string | undefined;
 }
+interface ThumbState {
+    /**
+     * The index of the thumb
+     */
+    index: number;
+    /**
+     * The value of the thumb
+     */
+    value: number;
+    /**
+     * Whether the thumb is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the thumb is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the thumb is being dragged
+     */
+    dragging: boolean;
+}
 interface DraggingIndicatorProps {
     index: number;
 }
+interface RootState {
+    /**
+     * Whether the slider is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the slider is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the slider is being dragged
+     */
+    dragging: boolean;
+    /**
+     * Whether the slider is focused
+     */
+    focused: boolean;
+    /**
+     * The orientation of the slider
+     */
+    orientation: "vertical" | "horizontal";
+}
 interface SliderApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the slider.
@@ -310,17 +368,29 @@ interface SliderApi<T extends PropTypes = PropTypes> {
      * Function to focus the slider. This focuses the first thumb.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the slider
+     */
+    getRootState: () => RootState;
     getLabelProps: () => T["label"];
     getRootProps: () => T["element"];
     getValueTextProps: () => T["element"];
     getTrackProps: () => T["element"];
+    /**
+     * Returns the state of a specific thumb
+     */
+    getThumbState: (props: ThumbProps) => ThumbState;
     getThumbProps: (props: ThumbProps) => T["element"];
     getHiddenInputProps: (props: ThumbProps) => T["input"];
     getRangeProps: () => T["element"];
     getControlProps: () => T["element"];
     getMarkerGroupProps: () => T["element"];
+    /**
+     * Returns the state of a specific marker
+     */
+    getMarkerState: (props: MarkerProps) => MarkerState;
     getMarkerProps: (props: MarkerProps) => T["element"];
     getDraggingIndicatorProps: (props: DraggingIndicatorProps) => T["element"];
 }
 
-export type { DraggingIndicatorProps, ElementIds, FocusChangeDetails, MarkerProps, SliderApi, SliderMachine, SliderProps, SliderSchema, SliderService, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ValueChangeDetails, ValueTextDetails };
+export type { DraggingIndicatorProps, ElementIds, FocusChangeDetails, MarkerProps, MarkerState, RootState, SliderApi, SliderMachine, SliderOrigin, SliderProps, SliderSchema, SliderService, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ThumbState, ValueChangeDetails, ValueTextDetails };

package/dist/slider.types.d.ts

@@ -3,6 +3,7 @@ import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag
 
 type ThumbCollisionBehavior = "none" | "push" | "swap";
 type ThumbAlignment = "contain" | "center";
+type SliderOrigin = "start" | "center" | "end" | number;
 interface ValueChangeDetails {
     value: number[];
 }
@@ -121,15 +122,14 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     orientation?: "vertical" | "horizontal" | undefined;
     /**
-     * The origin of the slider range. The track is filled from the origin
-     * to the thumb for single values.
-     * - "start": Useful when the value represents an absolute value
-     * - "center": Useful when the value represents an offset (relative)
-     * - "end": Useful when the value represents an offset from the end
+     * The origin of the slider range. The track is filled from the origin to the thumb.
+     * - `"start"` / `"end"`: fill from `min` / `max`
+     * - `"center"`: fill from the midpoint of `min`/`max`
+     * - a `number`: fill from that value instead, for when the neutral point isn't the midpoint
      *
      * @default "start"
      */
-    origin?: "start" | "center" | "end" | undefined;
+    origin?: SliderOrigin | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -242,13 +242,71 @@ interface Size {
 interface MarkerProps {
     value: number;
 }
+interface MarkerState {
+    /**
+     * The value of the marker
+     */
+    value: number;
+    /**
+     * Whether the marker is disabled
+     */
+    disabled: boolean;
+    /**
+     * The state of the marker relative to the slider value
+     */
+    state: "under-value" | "over-value" | "at-value";
+}
 interface ThumbProps {
     index: number;
     name?: string | undefined;
 }
+interface ThumbState {
+    /**
+     * The index of the thumb
+     */
+    index: number;
+    /**
+     * The value of the thumb
+     */
+    value: number;
+    /**
+     * Whether the thumb is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the thumb is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the thumb is being dragged
+     */
+    dragging: boolean;
+}
 interface DraggingIndicatorProps {
     index: number;
 }
+interface RootState {
+    /**
+     * Whether the slider is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the slider is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the slider is being dragged
+     */
+    dragging: boolean;
+    /**
+     * Whether the slider is focused
+     */
+    focused: boolean;
+    /**
+     * The orientation of the slider
+     */
+    orientation: "vertical" | "horizontal";
+}
 interface SliderApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the slider.
@@ -310,17 +368,29 @@ interface SliderApi<T extends PropTypes = PropTypes> {
      * Function to focus the slider. This focuses the first thumb.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the slider
+     */
+    getRootState: () => RootState;
     getLabelProps: () => T["label"];
     getRootProps: () => T["element"];
     getValueTextProps: () => T["element"];
     getTrackProps: () => T["element"];
+    /**
+     * Returns the state of a specific thumb
+     */
+    getThumbState: (props: ThumbProps) => ThumbState;
     getThumbProps: (props: ThumbProps) => T["element"];
     getHiddenInputProps: (props: ThumbProps) => T["input"];
     getRangeProps: () => T["element"];
     getControlProps: () => T["element"];
     getMarkerGroupProps: () => T["element"];
+    /**
+     * Returns the state of a specific marker
+     */
+    getMarkerState: (props: MarkerProps) => MarkerState;
     getMarkerProps: (props: MarkerProps) => T["element"];
     getDraggingIndicatorProps: (props: DraggingIndicatorProps) => T["element"];
 }
 
-export type { DraggingIndicatorProps, ElementIds, FocusChangeDetails, MarkerProps, SliderApi, SliderMachine, SliderProps, SliderSchema, SliderService, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ValueChangeDetails, ValueTextDetails };
+export type { DraggingIndicatorProps, ElementIds, FocusChangeDetails, MarkerProps, MarkerState, RootState, SliderApi, SliderMachine, SliderOrigin, SliderProps, SliderSchema, SliderService, ThumbAlignment, ThumbCollisionBehavior, ThumbProps, ThumbState, ValueChangeDetails, ValueTextDetails };

package/dist/slider.utils.d.mts

@@ -1,5 +1,5 @@
 import { Params } from '@zag-js/core';
-import { SliderSchema, ThumbCollisionBehavior } from './slider.types.mjs';
+import { SliderSchema, SliderOrigin, ThumbCollisionBehavior } from './slider.types.mjs';
 import '@zag-js/types';
 
 type Ctx = Params<SliderSchema>;
@@ -21,5 +21,12 @@ declare function increment(params: Pick<Ctx, "context" | "prop">, index?: number
 declare function getClosestIndex(params: Pick<Ctx, "context" | "prop">, pointValue: number): number;
 declare function selectMovableThumb(params: Pick<Ctx, "context" | "prop">, index: number): number;
 declare function assignArray(current: number[], next: number[]): void;
+/** Resolves the `origin` prop to a percent position (0-100) within `min`-`max`. */
+declare function getOriginPercent(origin: SliderOrigin, min: number, max: number): number;
+/** Track-fill insets (from the left/right edges) needed to fill between origin and value. */
+declare function getFillRange(valuePercent: number, originPercent: number): {
+    start: number;
+    end: number;
+};
 
-export { assignArray, constrainValue, decrement, getClosestIndex, getRangeAtIndex, increment, normalizeValues, resolveThumbCollision, selectMovableThumb };
+export { assignArray, constrainValue, decrement, getClosestIndex, getFillRange, getOriginPercent, getRangeAtIndex, increment, normalizeValues, resolveThumbCollision, selectMovableThumb };

package/dist/slider.utils.d.ts

@@ -1,5 +1,5 @@
 import { Params } from '@zag-js/core';
-import { SliderSchema, ThumbCollisionBehavior } from './slider.types.js';
+import { SliderSchema, SliderOrigin, ThumbCollisionBehavior } from './slider.types.js';
 import '@zag-js/types';
 
 type Ctx = Params<SliderSchema>;
@@ -21,5 +21,12 @@ declare function increment(params: Pick<Ctx, "context" | "prop">, index?: number
 declare function getClosestIndex(params: Pick<Ctx, "context" | "prop">, pointValue: number): number;
 declare function selectMovableThumb(params: Pick<Ctx, "context" | "prop">, index: number): number;
 declare function assignArray(current: number[], next: number[]): void;
+/** Resolves the `origin` prop to a percent position (0-100) within `min`-`max`. */
+declare function getOriginPercent(origin: SliderOrigin, min: number, max: number): number;
+/** Track-fill insets (from the left/right edges) needed to fill between origin and value. */
+declare function getFillRange(valuePercent: number, originPercent: number): {
+    start: number;
+    end: number;
+};
 
-export { assignArray, constrainValue, decrement, getClosestIndex, getRangeAtIndex, increment, normalizeValues, resolveThumbCollision, selectMovableThumb };
+export { assignArray, constrainValue, decrement, getClosestIndex, getFillRange, getOriginPercent, getRangeAtIndex, increment, normalizeValues, resolveThumbCollision, selectMovableThumb };

package/dist/slider.utils.js

@@ -24,6 +24,8 @@ __export(slider_utils_exports, {
   constrainValue: () => constrainValue,
   decrement: () => decrement,
   getClosestIndex: () => getClosestIndex,
+  getFillRange: () => getFillRange,
+  getOriginPercent: () => getOriginPercent,
   getRangeAtIndex: () => getRangeAtIndex,
   increment: () => increment,
   normalizeValues: () => normalizeValues,
@@ -183,12 +185,35 @@ function assignArray(current, next) {
     current[i] = value;
   }
 }
+function getOriginPercent(origin, min, max) {
+  if (typeof origin === "number") {
+    return (0, import_utils.clampValue)(100 * (0, import_utils.getValuePercent)(origin, min, max), 0, 100);
+  }
+  switch (origin) {
+    case "end":
+      return 100;
+    case "center":
+      return 50;
+    case "start":
+    default:
+      return 0;
+  }
+}
+function getFillRange(valuePercent, originPercent) {
+  const isBeforeOrigin = valuePercent < originPercent;
+  return {
+    start: isBeforeOrigin ? valuePercent : originPercent,
+    end: isBeforeOrigin ? 100 - originPercent : 100 - valuePercent
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   assignArray,
   constrainValue,
   decrement,
   getClosestIndex,
+  getFillRange,
+  getOriginPercent,
   getRangeAtIndex,
   increment,
   normalizeValues,

package/dist/slider.utils.mjs

@@ -1,5 +1,12 @@
 // src/slider.utils.ts
-import { clampValue, getNextStepValue, getPreviousStepValue, getValueRanges, snapValueToStep } from "@zag-js/utils";
+import {
+  clampValue,
+  getNextStepValue,
+  getPreviousStepValue,
+  getValuePercent,
+  getValueRanges,
+  snapValueToStep
+} from "@zag-js/utils";
 function getThumbBounds(ctx) {
   const { index, values, min, max, gap } = ctx;
   const prevThumb = values[index - 1];
@@ -151,11 +158,34 @@ function assignArray(current, next) {
     current[i] = value;
   }
 }
+function getOriginPercent(origin, min, max) {
+  if (typeof origin === "number") {
+    return clampValue(100 * getValuePercent(origin, min, max), 0, 100);
+  }
+  switch (origin) {
+    case "end":
+      return 100;
+    case "center":
+      return 50;
+    case "start":
+    default:
+      return 0;
+  }
+}
+function getFillRange(valuePercent, originPercent) {
+  const isBeforeOrigin = valuePercent < originPercent;
+  return {
+    start: isBeforeOrigin ? valuePercent : originPercent,
+    end: isBeforeOrigin ? 100 - originPercent : 100 - valuePercent
+  };
+}
 export {
   assignArray,
   constrainValue,
   decrement,
   getClosestIndex,
+  getFillRange,
+  getOriginPercent,
   getRangeAtIndex,
   increment,
   normalizeValues,

package/package.json

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