@zag-js/slider 2.0.0-next.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(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,44 +146,48 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...import_slider.parts.root.attrs(scope.id),
-        "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),
+        "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(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)
+        "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(scope.id),
         dir: prop("dir"),
-        "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({
@@ -164,21 +195,21 @@ function connect(service, normalize) {
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        "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;
@@ -207,7 +238,7 @@ function connect(service, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = (0, import_dom_query.getEventStep)(event) * prop("step");
+          const step = (0, import_dom_query.getEventStepValue)(event, { step: prop("step"), largeStep: prop("largeStep") });
           const keyMap = {
             ArrowUp() {
               if (isHorizontal) return;
@@ -253,36 +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({
         ...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(scope.id),
         dir: prop("dir"),
-        "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;
@@ -305,37 +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(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(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

@@ -4,7 +4,7 @@ import {
   dataAttr,
   getEventKey,
   getEventPoint,
-  getEventStep,
+  getEventStepValue,
   isLeftClick,
   isModifierKey
 } from "@zag-js/dom-query";
@@ -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(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,44 +127,48 @@ function connect(service, normalize) {
       });
     },
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...parts.root.attrs(scope.id),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-dragging": dataAttr(dragging),
-        "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused),
+        "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(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": prop("orientation"),
-        "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused)
+        "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(scope.id),
         dir: prop("dir"),
-        "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({
@@ -145,21 +176,21 @@ function connect(service, normalize) {
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        "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;
@@ -188,7 +219,7 @@ function connect(service, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = getEventStep(event) * prop("step");
+          const step = getEventStepValue(event, { step: prop("step"), largeStep: prop("largeStep") });
           const keyMap = {
             ArrowUp() {
               if (isHorizontal) return;
@@ -234,36 +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({
         ...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(scope.id),
         dir: prop("dir"),
-        "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;
@@ -286,37 +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(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(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.machine.js

@@ -69,6 +69,7 @@ var machine = (0, import_core.createMachine)({
       thumbCollisionBehavior: "none",
       minStepsBetweenThumbs,
       ...props,
+      largeStep: props.largeStep ?? 10 * step,
       defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
       value: props.value ? normalize(props.value, min, max, step, minStepsBetweenThumbs) : void 0,
       max,

package/dist/slider.machine.mjs

@@ -54,6 +54,7 @@ var machine = createMachine({
       thumbCollisionBehavior: "none",
       minStepsBetweenThumbs,
       ...props,
+      largeStep: props.largeStep ?? 10 * step,
       defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
       value: props.value ? normalize(props.value, min, max, step, minStepsBetweenThumbs) : void 0,
       max,

package/dist/slider.props.js

@@ -41,6 +41,7 @@ var props = (0, import_types.createProps)()([
   "id",
   "ids",
   "invalid",
+  "largeStep",
   "max",
   "min",
   "minStepsBetweenThumbs",

package/dist/slider.props.mjs

@@ -12,6 +12,7 @@ var props = createProps()([
   "id",
   "ids",
   "invalid",
+  "largeStep",
   "max",
   "min",
   "minStepsBetweenThumbs",

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[];
 }
@@ -98,6 +99,12 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
+    /**
+     * The step value of the slider when the `Shift` key is held, or the
+     * `PageUp`/`PageDown` keys are used.
+     * @default 10 * step
+     */
+    largeStep?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
      *
@@ -115,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.
@@ -149,7 +155,7 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     thumbCollisionBehavior?: "none" | "push" | "swap" | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "largeStep" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
     /**
      * @computed
@@ -236,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.
@@ -304,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[];
 }
@@ -98,6 +99,12 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
+    /**
+     * The step value of the slider when the `Shift` key is held, or the
+     * `PageUp`/`PageDown` keys are used.
+     * @default 10 * step
+     */
+    largeStep?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
      *
@@ -115,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.
@@ -149,7 +155,7 @@ interface SliderProps extends DirectionProperty, CommonProperties {
      */
     thumbCollisionBehavior?: "none" | "push" | "swap" | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "largeStep" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
     /**
      * @computed
@@ -236,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.
@@ -304,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": "2.0.0-next.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -15,7 +15,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/slider",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/slider"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -27,11 +30,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.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"