@zag-js/slider 0.9.2 → 0.10.0

package/dist/{chunk-JG4OWFJP.mjs → chunk-NYN3VIY4.mjs}

@@ -3,8 +3,8 @@ import {
 } from "./chunk-IJAAAKZQ.mjs";
 
 // src/slider.dom.ts
+import { getRelativePoint } from "@zag-js/dom-event";
 import { createScope } from "@zag-js/dom-query";
-import { getRelativePointValue } from "@zag-js/dom-event";
 import { dispatchInputValueEvent } from "@zag-js/form-utils";
 import { getPercentValue } from "@zag-js/numeric-range";
 var dom = createScope({
@@ -20,21 +20,15 @@ var dom = createScope({
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = getRelativePointValue(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
+    const relativePoint = getRelativePoint(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
     return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {

package/dist/{chunk-CNR2557J.mjs → chunk-OCT2YBMN.mjs}

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-JG4OWFJP.mjs";
+} from "./chunk-NYN3VIY4.mjs";
 import {
   constrainValue,
   decrement,

package/dist/{chunk-TMLAO23S.mjs → chunk-T6GXNUP7.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3Y7IIPR5.mjs";
 import {
   dom
-} from "./chunk-JG4OWFJP.mjs";
+} from "./chunk-NYN3VIY4.mjs";
 
 // src/slider.connect.ts
 import {

package/dist/index.js

@@ -49,8 +49,8 @@ var import_dom_query2 = require("@zag-js/dom-query");
 var import_numeric_range3 = require("@zag-js/numeric-range");
 
 // src/slider.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
 var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
 var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
@@ -180,21 +180,15 @@ var dom = (0, import_dom_query.createScope)({
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
+    const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
     return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {

package/dist/index.mjs

@@ -1,15 +1,15 @@
 import {
   connect
-} from "./chunk-TMLAO23S.mjs";
+} from "./chunk-T6GXNUP7.mjs";
 import {
   anatomy
 } from "./chunk-3Y7IIPR5.mjs";
 import {
   machine
-} from "./chunk-CNR2557J.mjs";
+} from "./chunk-OCT2YBMN.mjs";
 import {
   dom
-} from "./chunk-JG4OWFJP.mjs";
+} from "./chunk-NYN3VIY4.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 import "./chunk-YGFSMEUO.mjs";
 export {

package/dist/slider.connect.js

@@ -44,8 +44,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
 var parts = anatomy.build();
 
 // src/slider.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
 var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
 var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
@@ -175,21 +175,15 @@ var dom = (0, import_dom_query.createScope)({
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
+    const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
     return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {

package/dist/slider.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-TMLAO23S.mjs";
+} from "./chunk-T6GXNUP7.mjs";
 import "./chunk-3Y7IIPR5.mjs";
-import "./chunk-JG4OWFJP.mjs";
+import "./chunk-NYN3VIY4.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 export {
   connect

package/dist/slider.dom.d.ts

@@ -33,7 +33,7 @@ declare const dom: {
     getMarkerId: (ctx: MachineContext, value: number) => string;
     getRootEl: (ctx: MachineContext) => HTMLElement | null;
     getThumbEl: (ctx: MachineContext) => HTMLElement | null;
-    getControlEl: (ctx: MachineContext) => HTMLElement | null;
+    getControlEl: (ctx: MachineContext) => HTMLElement;
     getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
     getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
     dispatchChangeEvent(ctx: MachineContext): void;

package/dist/slider.dom.js

@@ -23,8 +23,8 @@ __export(slider_dom_exports, {
   dom: () => dom
 });
 module.exports = __toCommonJS(slider_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
 var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
 var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
@@ -154,21 +154,15 @@ var dom = (0, import_dom_query.createScope)({
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
+    const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
     return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {

package/dist/slider.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-JG4OWFJP.mjs";
+} from "./chunk-NYN3VIY4.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 export {
   dom

package/dist/slider.machine.js

@@ -32,8 +32,8 @@ var import_numeric_range4 = require("@zag-js/numeric-range");
 var import_utils = require("@zag-js/utils");
 
 // src/slider.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
 var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
 var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
@@ -163,21 +163,15 @@ var dom = (0, import_dom_query.createScope)({
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
+    const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
     return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {

package/dist/slider.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-CNR2557J.mjs";
-import "./chunk-JG4OWFJP.mjs";
+} from "./chunk-OCT2YBMN.mjs";
+import "./chunk-NYN3VIY4.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 import "./chunk-YGFSMEUO.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -17,7 +17,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/slider",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -26,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.9.2",
-    "@zag-js/core": "0.9.2",
-    "@zag-js/dom-query": "0.9.2",
-    "@zag-js/dom-event": "0.9.2",
-    "@zag-js/form-utils": "0.9.2",
-    "@zag-js/utils": "0.9.2",
-    "@zag-js/element-size": "0.9.2",
-    "@zag-js/numeric-range": "0.9.2",
-    "@zag-js/types": "0.9.2"
+    "@zag-js/anatomy": "0.10.0",
+    "@zag-js/core": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/form-utils": "0.10.0",
+    "@zag-js/utils": "0.10.0",
+    "@zag-js/element-size": "0.10.0",
+    "@zag-js/numeric-range": "0.10.0",
+    "@zag-js/types": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -0,0 +1,5 @@
+export { anatomy } from "./slider.anatomy"
+export { connect } from "./slider.connect"
+export { dom as unstable__dom } from "./slider.dom"
+export { machine } from "./slider.machine"
+export type { UserDefinedContext as Context } from "./slider.types"

package/src/slider.anatomy.ts

@@ -0,0 +1,15 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "hiddenInput",
+  "output",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker",
+)
+export const parts = anatomy.build()

package/src/slider.connect.ts

@@ -0,0 +1,276 @@
+import {
+  EventKeyMap,
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  getNativeEvent,
+  isLeftClick,
+  isModifiedEvent,
+} from "@zag-js/dom-event"
+import { ariaAttr, dataAttr } from "@zag-js/dom-query"
+import { getPercentValue, getValuePercent } from "@zag-js/numeric-range"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { parts } from "./slider.anatomy"
+import { dom } from "./slider.dom"
+import type { Send, State } from "./slider.types"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+  const ariaLabel = state.context["aria-label"]
+  const ariaLabelledBy = state.context["aria-labelledby"]
+  const ariaValueText = state.context.getAriaValueText?.(state.context.value)
+
+  const isFocused = state.matches("focus")
+  const isDragging = state.matches("dragging")
+  const isDisabled = state.context.disabled
+  const isInteractive = state.context.isInteractive
+  const isInvalid = state.context.invalid
+
+  function getPercentValueFn(percent: number) {
+    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
+  }
+
+  function getValuePercentFn(value: number) {
+    return getValuePercent(value, state.context.min, state.context.max)
+  }
+
+  // TODO - getMarkerState
+
+  return {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused,
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging,
+    /**
+     * The value of the slider.
+     */
+    value: state.context.value,
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: getValuePercent(state.context.value, state.context.min, state.context.max),
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value: number) {
+      send({ type: "SET_VALUE", value })
+    },
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: getPercentValueFn,
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: getValuePercentFn,
+    /**
+     * Function to focus the slider.
+     */
+    focus() {
+      dom.getThumbEl(state.context)?.focus()
+    },
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment() {
+      send("INCREMENT")
+    },
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement() {
+      send("DECREMENT")
+    },
+
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
+      "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context),
+    }),
+
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
+      onClick(event) {
+        if (!isInteractive) return
+        event.preventDefault()
+        dom.getThumbEl(state.context)?.focus()
+      },
+      style: dom.getLabelStyle(),
+    }),
+
+    thumbProps: normalize.element({
+      ...parts.thumb.attrs,
+      id: dom.getThumbId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      draggable: false,
+      "aria-invalid": ariaAttr(isInvalid),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-disabled": ariaAttr(isDisabled),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy ?? dom.getLabelId(state.context),
+      "aria-orientation": state.context.orientation,
+      "aria-valuemax": state.context.max,
+      "aria-valuemin": state.context.min,
+      "aria-valuenow": state.context.value,
+      "aria-valuetext": ariaValueText,
+      role: "slider",
+      tabIndex: isDisabled ? undefined : 0,
+      onBlur() {
+        if (!isInteractive) return
+        send("BLUR")
+      },
+      onFocus() {
+        if (!isInteractive) return
+        send("FOCUS")
+      },
+      onKeyDown(event) {
+        if (!isInteractive) return
+        const step = getEventStep(event) * state.context.step
+        let prevent = true
+        const keyMap: EventKeyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step })
+            prevent = state.context.isVertical
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step })
+            prevent = state.context.isVertical
+          },
+          ArrowLeft() {
+            send({ type: "ARROW_LEFT", step })
+            prevent = state.context.isHorizontal
+          },
+          ArrowRight() {
+            send({ type: "ARROW_RIGHT", step })
+            prevent = state.context.isHorizontal
+          },
+          PageUp() {
+            send({ type: "PAGE_UP", step })
+          },
+          PageDown() {
+            send({ type: "PAGE_DOWN", step })
+          },
+          Home() {
+            send("HOME")
+          },
+          End() {
+            send("END")
+          },
+        }
+
+        const key = getEventKey(event, state.context)
+        const exec = keyMap[key]
+
+        if (!exec) return
+        exec(event)
+
+        if (prevent) {
+          event.preventDefault()
+        }
+      },
+      style: dom.getThumbStyle(state.context),
+    }),
+
+    hiddenInputProps: normalize.input({
+      ...parts.hiddenInput.attrs,
+      type: "text",
+      defaultValue: state.context.value,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getHiddenInputId(state.context),
+      hidden: true,
+    }),
+
+    outputProps: normalize.output({
+      ...parts.output.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getOutputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
+      "aria-live": "off",
+    }),
+
+    trackProps: normalize.element({
+      ...parts.track.attrs,
+      id: dom.getTrackId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state.context.orientation,
+      style: dom.getTrackStyle(),
+    }),
+
+    rangeProps: normalize.element({
+      ...parts.range.attrs,
+      id: dom.getRangeId(state.context),
+      "data-focus": dataAttr(isFocused),
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
+      style: dom.getRangeStyle(state.context),
+    }),
+
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      id: dom.getControlId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      onPointerDown(event) {
+        if (!isInteractive) return
+
+        const evt = getNativeEvent(event)
+        if (!isLeftClick(evt) || isModifiedEvent(evt)) return
+
+        const point = getEventPoint(evt)
+        send({ type: "POINTER_DOWN", point })
+
+        event.preventDefault()
+        event.stopPropagation()
+      },
+      style: dom.getControlStyle(),
+    }),
+
+    markerGroupProps: normalize.element({
+      ...parts.markerGroup.attrs,
+      role: "presentation",
+      "aria-hidden": true,
+      "data-orientation": state.context.orientation,
+      style: dom.getMarkerGroupStyle(),
+    }),
+
+    getMarkerProps({ value }: { value: number }) {
+      const percent = getValuePercentFn(value)
+      const style = dom.getMarkerStyle(state.context, percent)
+      const markerState =
+        value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value"
+
+      return normalize.element({
+        ...parts.marker.attrs,
+        id: dom.getMarkerId(state.context, value),
+        role: "presentation",
+        "data-orientation": state.context.orientation,
+        "data-value": value,
+        "data-disabled": dataAttr(isDisabled),
+        "data-state": markerState,
+        style,
+      })
+    },
+  }
+}

package/src/slider.dom.ts

@@ -0,0 +1,41 @@
+import { getRelativePoint } from "@zag-js/dom-event"
+import { createScope } from "@zag-js/dom-query"
+import { dispatchInputValueEvent } from "@zag-js/form-utils"
+import { getPercentValue } from "@zag-js/numeric-range"
+import { styles } from "./slider.style"
+import type { MachineContext as Ctx, Point } from "./slider.types"
+
+export const dom = createScope({
+  ...styles,
+
+  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx: Ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
+  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `slider:${ctx.id}:input`,
+  getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
+  getRangeId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
+  getMarkerId: (ctx: Ctx, value: number) => `slider:${ctx.id}:marker:${value}`,
+
+  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getControlEl: (ctx: Ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
+  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
+
+  getValueFromPoint(ctx: Ctx, point: Point): number | undefined {
+    const relativePoint = getRelativePoint(point, dom.getControlEl(ctx))
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true },
+    })
+    return getPercentValue(percent, ctx.min, ctx.max, ctx.step)
+  },
+
+  dispatchChangeEvent(ctx: Ctx) {
+    const input = dom.getHiddenInputEl(ctx)
+    if (!input) return
+    dispatchInputValueEvent(input, { value: ctx.value })
+  },
+})

package/src/slider.machine.ts

@@ -0,0 +1,210 @@
+import { createMachine } from "@zag-js/core"
+import { trackPointerMove } from "@zag-js/dom-event"
+import { raf } from "@zag-js/dom-query"
+import { trackElementSize } from "@zag-js/element-size"
+import { trackFormControl } from "@zag-js/form-utils"
+import { clampValue, getValuePercent } from "@zag-js/numeric-range"
+import { compact } from "@zag-js/utils"
+import { dom } from "./slider.dom"
+import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types"
+import { constrainValue, decrement, increment } from "./slider.utils"
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "slider",
+      initial: "idle",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        disabled: false,
+        threshold: 5,
+        dir: "ltr",
+        origin: "start",
+        orientation: "horizontal",
+        initialValue: null,
+        value: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        ...ctx,
+      },
+
+      computed: {
+        isHorizontal: (ctx) => ctx.orientation === "horizontal",
+        isVertical: (ctx) => ctx.orientation === "vertical",
+        isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
+        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),
+        hasMeasuredThumbSize: (ctx) => ctx.thumbSize !== null,
+        valuePercent: (ctx) => 100 * getValuePercent(ctx.value, ctx.min, ctx.max),
+      },
+
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"],
+      },
+
+      activities: ["trackFormControlState", "trackThumbSize"],
+
+      on: {
+        SET_VALUE: {
+          actions: "setValue",
+        },
+        INCREMENT: {
+          actions: "increment",
+        },
+        DECREMENT: {
+          actions: "decrement",
+        },
+      },
+
+      entry: ["checkValue"],
+
+      states: {
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+            },
+            FOCUS: "focus",
+          },
+        },
+
+        focus: {
+          entry: "focusThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement",
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment",
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment",
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement",
+            },
+            PAGE_UP: {
+              actions: "increment",
+            },
+            PAGE_DOWN: {
+              actions: "decrement",
+            },
+            HOME: {
+              actions: "setToMin",
+            },
+            END: {
+              actions: "setToMax",
+            },
+            BLUR: "idle",
+          },
+        },
+
+        dragging: {
+          entry: "focusThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd",
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue",
+            },
+          },
+        },
+      },
+    },
+    {
+      guards: {
+        isHorizontal: (ctx) => ctx.isHorizontal,
+        isVertical: (ctx) => ctx.isVertical,
+      },
+
+      activities: {
+        trackFormControlState(ctx) {
+          return trackFormControl(dom.getHiddenInputEl(ctx), {
+            onFieldsetDisabled() {
+              ctx.disabled = true
+            },
+            onFormReset() {
+              if (ctx.initialValue != null) {
+                ctx.value = ctx.initialValue
+              }
+            },
+          })
+        },
+
+        trackPointerMove(ctx, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point })
+            },
+            onPointerUp() {
+              send("POINTER_UP")
+            },
+          })
+        },
+        trackThumbSize(ctx, _evt) {
+          if (ctx.thumbAlignment !== "contain") return
+          return trackElementSize(dom.getThumbEl(ctx), (size) => {
+            if (size) ctx.thumbSize = size
+          })
+        },
+      },
+
+      actions: {
+        checkValue(ctx) {
+          const value = constrainValue(ctx, ctx.value)
+          ctx.value = value
+          ctx.initialValue = value
+        },
+        invokeOnChangeStart(ctx) {
+          ctx.onChangeStart?.({ value: ctx.value })
+        },
+        invokeOnChangeEnd(ctx) {
+          ctx.onChangeEnd?.({ value: ctx.value })
+        },
+        invokeOnChange(ctx) {
+          ctx.onChange?.({ value: ctx.value })
+        },
+        dispatchChangeEvent(ctx) {
+          dom.dispatchChangeEvent(ctx)
+        },
+        setPointerValue(ctx, evt) {
+          const value = dom.getValueFromPoint(ctx, evt.point)
+          if (value == null) return
+          ctx.value = clampValue(value, ctx.min, ctx.max)
+        },
+        focusThumb(ctx) {
+          raf(() => dom.getThumbEl(ctx)?.focus())
+        },
+        decrement(ctx, evt) {
+          ctx.value = decrement(ctx, evt.step)
+        },
+        increment(ctx, evt) {
+          ctx.value = increment(ctx, evt.step)
+        },
+        setToMin(ctx) {
+          ctx.value = ctx.min
+        },
+        setToMax(ctx) {
+          ctx.value = ctx.max
+        },
+        setValue(ctx, evt) {
+          ctx.value = constrainValue(ctx, evt.value)
+        },
+      },
+    },
+  )
+}

package/src/slider.style.ts

@@ -0,0 +1,165 @@
+import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range"
+import type { Style } from "@zag-js/types"
+import type { MachineContext as Ctx, SharedContext } from "./slider.types"
+
+/* -----------------------------------------------------------------------------
+ * Thumb style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getVerticalThumbOffset(ctx: SharedContext) {
+  const { height = 0 } = ctx.thumbSize ?? {}
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2])
+  return parseFloat(getValue(ctx.value).toFixed(2))
+}
+
+function getHorizontalThumbOffset(ctx: SharedContext) {
+  const { width = 0 } = ctx.thumbSize ?? {}
+
+  if (ctx.isRtl) {
+    const getValue = getValueTransformer([ctx.max, ctx.min], [-width * 1.5, -width / 2])
+    return -1 * parseFloat(getValue(ctx.value).toFixed(2))
+  }
+
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2])
+  return parseFloat(getValue(ctx.value).toFixed(2))
+}
+
+function getThumbOffset(ctx: SharedContext) {
+  const percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100
+
+  if (ctx.thumbAlignment === "center") {
+    return `${percent}%`
+  }
+
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx)
+  return `calc(${percent}% - ${offset}px)`
+}
+
+function getVisibility(ctx: SharedContext) {
+  let visibility: "visible" | "hidden" = "visible"
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden"
+  }
+  return visibility
+}
+
+function getThumbStyle(ctx: SharedContext): Style {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left"
+  return {
+    visibility: getVisibility(ctx),
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)",
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Range style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getRangeOffsets(ctx: Ctx) {
+  let start = "0%"
+  let end = `${100 - ctx.valuePercent}%`
+
+  if (ctx.origin === "center") {
+    const isNegative = ctx.valuePercent < 50
+    start = isNegative ? `${ctx.valuePercent}%` : "50%"
+    end = isNegative ? "50%" : end
+  }
+
+  return { start, end }
+}
+
+function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)",
+    }
+  }
+
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)",
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Control style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getControlStyle(): Style {
+  return {
+    touchAction: "none",
+    userSelect: "none",
+    position: "relative",
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Root style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getRootStyle(ctx: Ctx): Style {
+  const range = getRangeOffsets(ctx)
+  return {
+    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--slider-thumb-offset": getThumbOffset(ctx),
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end,
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Marker style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getMarkerStyle(ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number): Style {
+  return {
+    position: "absolute",
+    pointerEvents: "none",
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`,
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Label style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getLabelStyle(): Style {
+  return { userSelect: "none" }
+}
+
+/* -----------------------------------------------------------------------------
+ * Label style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getTrackStyle(): Style {
+  return { position: "relative" }
+}
+
+/* -----------------------------------------------------------------------------
+ * Label style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getMarkerGroupStyle(): Style {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
+    position: "relative",
+  }
+}
+
+export const styles = {
+  getThumbOffset,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getRootStyle,
+  getMarkerStyle,
+  getLabelStyle,
+  getTrackStyle,
+  getMarkerGroupStyle,
+}

package/src/slider.types.ts

@@ -0,0 +1,182 @@
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types"
+
+type ElementIds = Partial<{
+  root: string
+  thumb: string
+  control: string
+  track: string
+  range: string
+  label: string
+  output: string
+  hiddenInput: string
+}>
+
+type PublicContext = DirectionProperty &
+  CommonProperties & {
+    /**
+     * The ids of the elements in the slider. Useful for composition.
+     */
+    ids?: ElementIds
+    /**
+     * The value of the slider
+     */
+    value: number
+    /**
+     * The name associated with the slider (when used in a form)
+     */
+    name?: string
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean
+    /**
+     * Whether the slider is read-only
+     */
+    readOnly?: boolean
+    /**
+     * Whether the slider value is invalid
+     */
+    invalid?: boolean
+    /**
+     * The minimum value of the slider
+     */
+    min: number
+    /**
+     * The maximum value of the slider
+     */
+    max: number
+    /**
+     * The step value of the slider
+     */
+    step: number
+    /**
+     * The orientation of the slider
+     */
+    orientation?: "vertical" | "horizontal"
+    /**
+     * - "start": Useful when the value represents an absolute value
+     * - "center": Useful when the value represents an offset (relative)
+     */
+    origin?: "start" | "center"
+    /**
+     * The aria-label of the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-label"?: string
+    /**
+     * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-labelledby"?: string
+    /**
+     * Whether to focus the slider thumb after interaction (scrub and keyboard)
+     */
+    focusThumbOnChange?: boolean
+    /**
+     * Function that returns a human readable value for the slider
+     */
+    getAriaValueText?(value: number): string
+    /**
+     * Function invoked when the value of the slider changes
+     */
+    onChange?(details: { value: number }): void
+    /**
+     * Function invoked when the slider value change is done
+     */
+    onChangeEnd?(details: { value: number }): void
+    /**
+     * Function invoked when the slider value change is started
+     */
+    onChangeStart?(details: { value: number }): void
+    /**
+     * The alignment of the slider thumb relative to the track
+     * - `center`: the thumb will extend beyond the bounds of the slider track.
+     * - `contain`: the thumb will be contained within the bounds of the track.
+     */
+    thumbAlignment?: "contain" | "center"
+  }
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+type ComputedContext = Readonly<{
+  /**
+   * @computed
+   * Whether the slider is interactive
+   */
+  readonly isInteractive: boolean
+  /**
+   * @computed
+   * Whether the thumb size has been measured
+   */
+  readonly hasMeasuredThumbSize: boolean
+  /**
+   * @computed
+   * Whether the slider is horizontal
+   */
+  readonly isHorizontal: boolean
+  /**
+   * @computed
+   * Whether the slider is vertical
+   */
+  readonly isVertical: boolean
+  /**
+   * @computed
+   * Whether the slider is in RTL mode
+   */
+  readonly isRtl: boolean
+  /**
+   * @computed
+   * The value of the slider as a percentage
+   */
+  readonly valuePercent: number
+}>
+
+type PrivateContext = Context<{
+  /**
+   * @internal The move threshold of the slider thumb before it is considered to be moved
+   */
+  threshold: number
+  /**
+   * @internal The slider thumb dimensions
+   */
+  thumbSize: { width: number; height: number } | null
+  /**
+   * @internal
+   * The value of the slider when it was initially rendered.
+   * Used when the `form.reset(...)` is called.
+   */
+  initialValue: number | null
+}>
+
+export type MachineContext = PublicContext & ComputedContext & PrivateContext
+
+export type MachineState = {
+  value: "idle" | "dragging" | "focus"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>
+
+export type SharedContext = {
+  min: number
+  max: number
+  step: number
+  dir?: "ltr" | "rtl"
+  isRtl: boolean
+  isVertical: boolean
+  isHorizontal: boolean
+  value: number
+  thumbSize: { width: number; height: number } | null
+  thumbAlignment?: "contain" | "center"
+  orientation?: "horizontal" | "vertical"
+  readonly hasMeasuredThumbSize: boolean
+}
+
+export type Point = {
+  x: number
+  y: number
+}

package/src/slider.utils.ts

@@ -0,0 +1,31 @@
+import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range"
+import type { MachineContext as Ctx } from "./slider.types"
+
+export function clampPercent(percent: number) {
+  return clampValue(percent, 0, 1)
+}
+
+export function constrainValue(ctx: Ctx, value: number) {
+  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step)
+  return clampValue(snapValue, ctx.min, ctx.max)
+}
+
+export function decrement(ctx: Ctx, step?: number) {
+  const index = 0
+  const values = getPreviousStepValue(index, {
+    ...ctx,
+    step: step ?? ctx.step,
+    values: [ctx.value],
+  })
+  return values[index]
+}
+
+export function increment(ctx: Ctx, step?: number) {
+  const index = 0
+  const values = getNextStepValue(index, {
+    ...ctx,
+    step: step ?? ctx.step,
+    values: [ctx.value],
+  })
+  return values[index]
+}