diff --git a/.changeset/slimy-ads-build.md b/.changeset/slimy-ads-build.md
new file mode 100644
index 0000000000..2ef0d63ba6
--- /dev/null
+++ b/.changeset/slimy-ads-build.md
@@ -0,0 +1,10 @@
+---
+"@zag-js/slider": minor
+---
+
+Merge the slider and range slider machines into one to prevent duplication.
+
+Some notable changes:
+
+- `value` and `onValueChange` type has been updated to be `number[]`
+- Update `api.getThumbProps(index)` to `api.getThumbProps({ index })`
diff --git a/.xstate/slider.js b/.xstate/slider.js
index 8589aaf5da..9249ca3aca 100644
--- a/.xstate/slider.js
+++ b/.xstate/slider.js
@@ -13,24 +13,28 @@ const fetchMachine = createMachine({
   id: "slider",
   initial: "idle",
   context: {
+    "hasIndex": false,
     "isHorizontal": false,
     "isHorizontal": false,
     "isVertical": false,
     "isVertical": false
   },
-  activities: ["trackFormControlState", "trackThumbSize"],
+  entry: ["coarseValue"],
+  activities: ["trackFormControlState", "trackThumbsSize"],
   on: {
-    SET_VALUE: {
+    SET_VALUE: [{
+      cond: "hasIndex",
+      actions: "setValueAtIndex"
+    }, {
       actions: "setValue"
-    },
+    }],
     INCREMENT: {
-      actions: "increment"
+      actions: "incrementAtIndex"
     },
     DECREMENT: {
-      actions: "decrement"
+      actions: "decrementAtIndex"
     }
   },
-  entry: ["checkValue"],
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
@@ -41,59 +45,65 @@ const fetchMachine = createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+        },
+        FOCUS: {
+          target: "focus",
+          actions: "setFocusedIndex"
         },
-        FOCUS: "focus",
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["invokeOnChangeStart", "focusThumb"]
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         }
       }
     },
     focus: {
-      entry: "focusThumb",
+      entry: "focusActiveThumb",
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["invokeOnChangeStart", "focusThumb"]
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         },
         ARROW_LEFT: {
           cond: "isHorizontal",
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         ARROW_RIGHT: {
           cond: "isHorizontal",
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         ARROW_UP: {
           cond: "isVertical",
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         ARROW_DOWN: {
           cond: "isVertical",
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         PAGE_UP: {
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         PAGE_DOWN: {
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         HOME: {
-          actions: "setToMin"
+          actions: "setActiveThumbToMin"
         },
         END: {
-          actions: "setToMax"
+          actions: "setActiveThumbToMax"
         },
-        BLUR: "idle"
+        BLUR: {
+          target: "idle",
+          actions: "clearFocusedIndex"
+        }
       }
     },
     dragging: {
-      entry: "focusThumb",
+      entry: "focusActiveThumb",
       activities: "trackPointerMove",
       on: {
         POINTER_UP: {
@@ -115,6 +125,7 @@ const fetchMachine = createMachine({
     })
   },
   guards: {
+    "hasIndex": ctx => ctx["hasIndex"],
     "isHorizontal": ctx => ctx["isHorizontal"],
     "isVertical": ctx => ctx["isVertical"]
   }
diff --git a/e2e/slider.e2e.ts b/e2e/slider.e2e.ts
index fd5ec06a79..3b604b34b9 100644
--- a/e2e/slider.e2e.ts
+++ b/e2e/slider.e2e.ts
@@ -1,9 +1,9 @@
 import { expect, test } from "@playwright/test"
-import { testid, a11y, rect } from "./__utils"
+import { part, a11y, rect } from "./__utils"
 
-const output = testid("output")
-const thumb = testid("thumb")
-const track = testid("track")
+const output = part("output")
+const thumb = part("thumb")
+const track = part("track")
 
 test.describe("slider", () => {
   test.beforeEach(async ({ page }) => {
diff --git a/examples/next-ts/CHANGELOG.md b/examples/next-ts/CHANGELOG.md
index afeff01eb5..38b9ec0c00 100644
--- a/examples/next-ts/CHANGELOG.md
+++ b/examples/next-ts/CHANGELOG.md
@@ -23,7 +23,7 @@
   - @zag-js/number-input@0.1.13
   - @zag-js/pin-input@0.1.11
   - @zag-js/popover@0.1.11
-  - @zag-js/range-slider@0.1.11
+  - @zag-js/slider@0.1.11
   - @zag-js/rating@0.1.11
   - @zag-js/slider@0.1.11
   - @zag-js/splitter@0.1.11
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index 37a5151b4f..57b440f2c4 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -55,14 +55,13 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/react": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -92,4 +91,4 @@
     "typescript": "5.2.2"
   },
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/examples/next-ts/pages/range-slider.tsx b/examples/next-ts/pages/range-slider.tsx
index 4c4ea2cd76..5fc64be298 100644
--- a/examples/next-ts/pages/range-slider.tsx
+++ b/examples/next-ts/pages/range-slider.tsx
@@ -1,6 +1,6 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { rangeSliderControls } from "@zag-js/shared"
+import { sliderControls } from "@zag-js/shared"
 import serialize from "form-serialize"
 import { useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
@@ -8,7 +8,7 @@ import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(rangeSliderControls)
+  const controls = useControls(sliderControls)
 
   const [state, send] = useMachine(
     slider.machine({
@@ -42,8 +42,8 @@ export default function Page() {
                   <div {...api.rangeProps} />
                 </div>
                 {api.value.map((_, index) => (
-                  <div key={index} {...api.getThumbProps(index)}>
-                    <input {...api.getHiddenInputProps(index)} />
+                  <div key={index} {...api.getThumbProps({ index })}>
+                    <input {...api.getHiddenInputProps({ index })} />
                   </div>
                 ))}
               </div>
diff --git a/examples/next-ts/pages/slider.tsx b/examples/next-ts/pages/slider.tsx
index 895184331d..9b44d72c97 100644
--- a/examples/next-ts/pages/slider.tsx
+++ b/examples/next-ts/pages/slider.tsx
@@ -14,6 +14,7 @@ export default function Page() {
     slider.machine({
       id: useId(),
       name: "quantity",
+      value: [0],
     }),
     {
       context: controls.context,
@@ -46,9 +47,11 @@ export default function Page() {
                 <div data-testid="track" {...api.trackProps}>
                   <div {...api.rangeProps} />
                 </div>
-                <div data-testid="thumb" {...api.thumbProps}>
-                  <input {...api.hiddenInputProps} />
-                </div>
+                {api.value.map((_, index) => (
+                  <div key={index} {...api.getThumbProps({ index })}>
+                    <input {...api.getHiddenInputProps({ index })} />
+                  </div>
+                ))}
               </div>
               <div {...api.markerGroupProps}>
                 <span {...api.getMarkerProps({ value: 10 })}>*</span>
diff --git a/examples/nuxt-ts/package.json b/examples/nuxt-ts/package.json
index 4b3a8e2872..72616140b9 100644
--- a/examples/nuxt-ts/package.json
+++ b/examples/nuxt-ts/package.json
@@ -54,13 +54,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -83,4 +82,4 @@
     "@types/node": "^20.8.4",
     "nuxt": "^3.7.3"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/nuxt-ts/pages/range-slider.vue b/examples/nuxt-ts/pages/range-slider.vue
index 927ae4609c..59df52a217 100644
--- a/examples/nuxt-ts/pages/range-slider.vue
+++ b/examples/nuxt-ts/pages/range-slider.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import * as slider from "@zag-js/range-slider"
-import { rangeSliderControls } from "@zag-js/shared"
+import * as slider from "@zag-js/slider"
+import { sliderControls } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import serialize from "form-serialize"
 
-const controls = useControls(rangeSliderControls)
+const controls = useControls(sliderControls)
 
 const [state, send] = useMachine(
   slider.machine({
@@ -38,8 +38,8 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
             <div v-bind="api.trackProps">
               <div v-bind="api.rangeProps" />
             </div>
-            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps(index)">
-              <input v-bind="api.getHiddenInputProps(index)" />
+            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps({ index })">
+              <input v-bind="api.getHiddenInputProps({ index })" />
             </div>
           </div>
         </div>
diff --git a/examples/nuxt-ts/pages/slider.vue b/examples/nuxt-ts/pages/slider.vue
index b53cdf84d2..52c09e888a 100644
--- a/examples/nuxt-ts/pages/slider.vue
+++ b/examples/nuxt-ts/pages/slider.vue
@@ -10,6 +10,7 @@ const [state, send] = useMachine(
   slider.machine({
     id: "1",
     name: "quantity",
+    value: [0],
   }),
   { context: controls.context },
 )
@@ -31,15 +32,15 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
       <div v-bind="api.rootProps">
         <div>
           <label data-testid="label" v-bind="api.labelProps"> Slider Label </label>
-          <output data-testid="output" v-bind="api.outputProps"> {api.value} </output>
+          <output data-testid="output" v-bind="api.outputProps"> {{ api.value.at(0) }} </output>
         </div>
         <div class="control-area">
           <div v-bind="api.controlProps">
             <div data-testid="track" v-bind="api.trackProps">
               <div v-bind="api.rangeProps" />
             </div>
-            <div data-testid="thumb" v-bind="api.thumbProps">
-              <input v-bind="api.hiddenInputProps" />
+            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps({ index })">
+              <input v-bind="api.getHiddenInputProps({ index })" />
             </div>
           </div>
           <div v-bind="api.markerGroupProps">
diff --git a/examples/shadow-dom/package.json b/examples/shadow-dom/package.json
index 52c394b649..732a290abd 100644
--- a/examples/shadow-dom/package.json
+++ b/examples/shadow-dom/package.json
@@ -53,13 +53,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/react": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -83,4 +82,4 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/solid-ts/CHANGELOG.md b/examples/solid-ts/CHANGELOG.md
index 4bc19996fa..b43460af28 100644
--- a/examples/solid-ts/CHANGELOG.md
+++ b/examples/solid-ts/CHANGELOG.md
@@ -23,7 +23,7 @@
   - @zag-js/number-input@0.1.13
   - @zag-js/pin-input@0.1.11
   - @zag-js/popover@0.1.11
-  - @zag-js/range-slider@0.1.11
+  - @zag-js/slider@0.1.11
   - @zag-js/rating@0.1.11
   - @zag-js/slider@0.1.11
   - @zag-js/splitter@0.1.11
diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
index b21c858a77..4b50d053d7 100644
--- a/examples/solid-ts/package.json
+++ b/examples/solid-ts/package.json
@@ -63,13 +63,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/solid": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
@@ -87,4 +86,4 @@
     "form-serialize": "0.7.2",
     "solid-js": "1.7.12"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/solid-ts/src/pages/range-slider.tsx b/examples/solid-ts/src/pages/range-slider.tsx
index f551231699..8b11623d43 100644
--- a/examples/solid-ts/src/pages/range-slider.tsx
+++ b/examples/solid-ts/src/pages/range-slider.tsx
@@ -1,14 +1,14 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import serialize from "form-serialize"
 import { createMemo, For, createUniqueId } from "solid-js"
-import { rangeSliderControls } from "@zag-js/shared"
+import { sliderControls } from "@zag-js/shared"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(rangeSliderControls)
+  const controls = useControls(sliderControls)
 
   const [state, send] = useMachine(
     slider.machine({
@@ -43,8 +43,8 @@ export default function Page() {
                 </div>
                 <For each={api().value}>
                   {(_, index) => (
-                    <div class="slider__thumb" {...api().getThumbProps(index())}>
-                      <input {...api().getHiddenInputProps(index())} />
+                    <div {...api().getThumbProps({ index: index() })}>
+                      <input {...api().getHiddenInputProps({ index: index() })} />
                     </div>
                   )}
                 </For>
diff --git a/examples/solid-ts/src/pages/slider.tsx b/examples/solid-ts/src/pages/slider.tsx
index d13a5ec805..1b2252f072 100644
--- a/examples/solid-ts/src/pages/slider.tsx
+++ b/examples/solid-ts/src/pages/slider.tsx
@@ -1,7 +1,7 @@
 import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import serialize from "form-serialize"
-import { createMemo, createUniqueId } from "solid-js"
+import { For, createMemo, createUniqueId } from "solid-js"
 import { sliderControls } from "@zag-js/shared"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -10,7 +10,7 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(sliderControls)
 
-  const [state, send] = useMachine(slider.machine({ id: createUniqueId() }), {
+  const [state, send] = useMachine(slider.machine({ id: createUniqueId(), value: [0] }), {
     context: controls.context,
   })
 
@@ -32,7 +32,7 @@ export default function Page() {
                 Slider Label
               </label>
               <output data-testid="output" {...api().outputProps}>
-                {api().value}
+                {api().value.at(0)}
               </output>
             </div>
             <div class="control-area">
@@ -40,9 +40,13 @@ export default function Page() {
                 <div data-testid="track" {...api().trackProps}>
                   <div {...api().rangeProps} />
                 </div>
-                <div data-testid="thumb" {...api().thumbProps}>
-                  <input {...api().hiddenInputProps} />
-                </div>
+                <For each={api().value}>
+                  {(_, index) => (
+                    <div {...api().getThumbProps({ index: index() })}>
+                      <input {...api().getHiddenInputProps({ index: index() })} />
+                    </div>
+                  )}
+                </For>
               </div>
               <div {...api().markerGroupProps}>
                 <span {...api().getMarkerProps({ value: 10 })}>*</span>
diff --git a/examples/vue-ts/CHANGELOG.md b/examples/vue-ts/CHANGELOG.md
index 8a79e182c5..37f6c810a3 100644
--- a/examples/vue-ts/CHANGELOG.md
+++ b/examples/vue-ts/CHANGELOG.md
@@ -23,7 +23,7 @@
   - @zag-js/number-input@0.1.13
   - @zag-js/pin-input@0.1.11
   - @zag-js/popover@0.1.11
-  - @zag-js/range-slider@0.1.11
+  - @zag-js/slider@0.1.11
   - @zag-js/rating@0.1.11
   - @zag-js/slider@0.1.11
   - @zag-js/splitter@0.1.11
diff --git a/examples/vue-ts/package.json b/examples/vue-ts/package.json
index 876aed29b3..c6a2474acf 100644
--- a/examples/vue-ts/package.json
+++ b/examples/vue-ts/package.json
@@ -55,13 +55,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -97,4 +96,4 @@
     "vue-tsc": "1.8.13"
   },
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/examples/vue-ts/src/pages/range-slider.tsx b/examples/vue-ts/src/pages/range-slider.tsx
index 7ce10faa61..d6e4d01a52 100644
--- a/examples/vue-ts/src/pages/range-slider.tsx
+++ b/examples/vue-ts/src/pages/range-slider.tsx
@@ -1,8 +1,8 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import serialize from "form-serialize"
 import { computed, defineComponent, h, Fragment } from "vue"
-import { rangeSliderControls } from "@zag-js/shared"
+import { sliderControls } from "@zag-js/shared"
 import { StateVisualizer } from "../components/state-visualizer"
 import { useControls } from "../hooks/use-controls"
 
@@ -11,7 +11,7 @@ import { Toolbar } from "../components/toolbar"
 export default defineComponent({
   name: "RangeSlider",
   setup() {
-    const controls = useControls(rangeSliderControls)
+    const controls = useControls(sliderControls)
 
     const [state, send] = useMachine(
       slider.machine({
diff --git a/examples/vue-ts/src/pages/slider.tsx b/examples/vue-ts/src/pages/slider.tsx
index 9895e13cec..da17cbd092 100644
--- a/examples/vue-ts/src/pages/slider.tsx
+++ b/examples/vue-ts/src/pages/slider.tsx
@@ -17,6 +17,7 @@ export default defineComponent({
       slider.machine({
         id: "1",
         name: "quantity",
+        value: [0],
       }),
       {
         context: controls.context,
@@ -55,9 +56,11 @@ export default defineComponent({
                     <div data-testid="track" {...api.trackProps}>
                       <div {...api.rangeProps} />
                     </div>
-                    <div data-testid="thumb" {...api.thumbProps}>
-                      <input {...api.hiddenInputProps} />
-                    </div>
+                    {api.value.map((_, index) => (
+                      <div key={index} {...api.getThumbProps({ index })}>
+                        <input {...api.getHiddenInputProps({ index })} />
+                      </div>
+                    ))}
                   </div>
                   <div {...api.markerGroupProps}>
                     <span {...api.getMarkerProps({ value: 10 })}>*</span>
diff --git a/packages/machines/range-slider/CHANGELOG.md b/packages/machines/range-slider/CHANGELOG.md
deleted file mode 100644
index 3058f72559..0000000000
--- a/packages/machines/range-slider/CHANGELOG.md
+++ /dev/null
@@ -1,1067 +0,0 @@
-# @zag-js/range-slider
-
-## 0.24.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.24.0
-  - @zag-js/core@0.24.0
-  - @zag-js/slider@0.24.0
-  - @zag-js/types@0.24.0
-  - @zag-js/utils@0.24.0
-  - @zag-js/dom-event@0.24.0
-  - @zag-js/dom-query@0.24.0
-  - @zag-js/element-size@0.24.0
-  - @zag-js/form-utils@0.24.0
-  - @zag-js/numeric-range@0.24.0
-
-## 0.23.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.23.0
-  - @zag-js/core@0.23.0
-  - @zag-js/slider@0.23.0
-  - @zag-js/types@0.23.0
-  - @zag-js/utils@0.23.0
-  - @zag-js/dom-event@0.23.0
-  - @zag-js/dom-query@0.23.0
-  - @zag-js/element-size@0.23.0
-  - @zag-js/form-utils@0.23.0
-  - @zag-js/numeric-range@0.23.0
-
-## 0.22.0
-
-### Patch Changes
-
-- [`25095948`](https://github.com/chakra-ui/zag/commit/25095948d25c0d5e8d3088de939eacc9961dbfe4) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Ensure `dir` context property is reflected in parts
-
-- Updated dependencies [[`25095948`](https://github.com/chakra-ui/zag/commit/25095948d25c0d5e8d3088de939eacc9961dbfe4)]:
-  - @zag-js/slider@0.22.0
-  - @zag-js/anatomy@0.22.0
-  - @zag-js/core@0.22.0
-  - @zag-js/types@0.22.0
-  - @zag-js/utils@0.22.0
-  - @zag-js/dom-event@0.22.0
-  - @zag-js/dom-query@0.22.0
-  - @zag-js/element-size@0.22.0
-  - @zag-js/form-utils@0.22.0
-  - @zag-js/numeric-range@0.22.0
-
-## 0.21.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.21.0
-  - @zag-js/core@0.21.0
-  - @zag-js/slider@0.21.0
-  - @zag-js/types@0.21.0
-  - @zag-js/utils@0.21.0
-  - @zag-js/dom-event@0.21.0
-  - @zag-js/dom-query@0.21.0
-  - @zag-js/element-size@0.21.0
-  - @zag-js/form-utils@0.21.0
-  - @zag-js/numeric-range@0.21.0
-
-## 0.20.0
-
-### Minor Changes
-
-- [#862](https://github.com/chakra-ui/zag/pull/862)
-  [`9a3a82f0`](https://github.com/chakra-ui/zag/commit/9a3a82f0b3738beda59c313fafd51360e6b0322f) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - BREAKING: Unify all callbacks to follow a consistent naming
-  convention
-
-### Patch Changes
-
-- [#864](https://github.com/chakra-ui/zag/pull/864)
-  [`be90c039`](https://github.com/chakra-ui/zag/commit/be90c039891ba943e735b701f71c2bf4ca3c43cd) Thanks
-  [@junghyeonsu](https://github.com/junghyeonsu)! - Fix issue where slider interaction works when `disabled` is set
-
-- [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Remove toggle machine
-
-- Updated dependencies [[`be90c039`](https://github.com/chakra-ui/zag/commit/be90c039891ba943e735b701f71c2bf4ca3c43cd),
-  [`9a3a82f0`](https://github.com/chakra-ui/zag/commit/9a3a82f0b3738beda59c313fafd51360e6b0322f),
-  [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85)]:
-  - @zag-js/slider@0.20.0
-  - @zag-js/types@0.20.0
-  - @zag-js/anatomy@0.20.0
-  - @zag-js/core@0.20.0
-  - @zag-js/utils@0.20.0
-  - @zag-js/dom-event@0.20.0
-  - @zag-js/dom-query@0.20.0
-  - @zag-js/element-size@0.20.0
-  - @zag-js/form-utils@0.20.0
-  - @zag-js/numeric-range@0.20.0
-
-## 0.19.1
-
-### Patch Changes
-
-- [`f5dff3f4`](https://github.com/chakra-ui/zag/commit/f5dff3f4e1a13d5315d3bcfcc1295952b46e4016) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where change callbacks could be executed excessively
-  when no value changed.
-
-- Updated dependencies [[`f5dff3f4`](https://github.com/chakra-ui/zag/commit/f5dff3f4e1a13d5315d3bcfcc1295952b46e4016),
-  [`3f0b6a19`](https://github.com/chakra-ui/zag/commit/3f0b6a19dcf9779846efb2bc093235299301bbdb)]:
-  - @zag-js/slider@0.19.1
-  - @zag-js/utils@0.19.1
-  - @zag-js/core@0.19.1
-  - @zag-js/anatomy@0.19.1
-  - @zag-js/types@0.19.1
-  - @zag-js/dom-event@0.19.1
-  - @zag-js/dom-query@0.19.1
-  - @zag-js/element-size@0.19.1
-  - @zag-js/form-utils@0.19.1
-  - @zag-js/numeric-range@0.19.1
-
-## 0.19.0
-
-### Patch Changes
-
-- Updated dependencies [[`4c578aab`](https://github.com/chakra-ui/zag/commit/4c578aab2d330405077bb790e884f968b6b5703f)]:
-  - @zag-js/form-utils@0.19.0
-  - @zag-js/slider@0.19.0
-  - @zag-js/anatomy@0.19.0
-  - @zag-js/core@0.19.0
-  - @zag-js/types@0.19.0
-  - @zag-js/utils@0.19.0
-  - @zag-js/dom-event@0.19.0
-  - @zag-js/dom-query@0.19.0
-  - @zag-js/element-size@0.19.0
-  - @zag-js/numeric-range@0.19.0
-
-## 0.18.0
-
-### Patch Changes
-
-- Updated dependencies [[`224cbbb0`](https://github.com/chakra-ui/zag/commit/224cbbb02eef713d81acbee627dd9a0ed745c7fa)]:
-  - @zag-js/utils@0.18.0
-  - @zag-js/core@0.18.0
-  - @zag-js/slider@0.18.0
-  - @zag-js/anatomy@0.18.0
-  - @zag-js/types@0.18.0
-  - @zag-js/dom-event@0.18.0
-  - @zag-js/dom-query@0.18.0
-  - @zag-js/element-size@0.18.0
-  - @zag-js/form-utils@0.18.0
-  - @zag-js/numeric-range@0.18.0
-
-## 0.17.0
-
-### Minor Changes
-
-- [`a1a585d6`](https://github.com/chakra-ui/zag/commit/a1a585d6d2dbac5836a847a39faf7d68db354188) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - - Fix issue where slider marks are not aligned to the thumb
-  position in "contain" alignment mode.
-
-  - Add support for passing the `thumbSize` in the machine context to avoid first-render flicker due to DOM measurement.
-
-- [#789](https://github.com/chakra-ui/zag/pull/789)
-  [`db81eaab`](https://github.com/chakra-ui/zag/commit/db81eaab8c8b06d74cf81d46fa145f4b480b7e82) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor machine event handling and rename `PublicApi` to `Api`
-
-### Patch Changes
-
-- [#807](https://github.com/chakra-ui/zag/pull/807)
-  [`82d1ab7b`](https://github.com/chakra-ui/zag/commit/82d1ab7b61d75fa6d7678e60af53b84c5d93e74b) Thanks
-  [@srflp](https://github.com/srflp)! - Re-enable the input after removing `disabled` attribute from the parent fieldset
-
-- Updated dependencies [[`a1a585d6`](https://github.com/chakra-ui/zag/commit/a1a585d6d2dbac5836a847a39faf7d68db354188),
-  [`82d1ab7b`](https://github.com/chakra-ui/zag/commit/82d1ab7b61d75fa6d7678e60af53b84c5d93e74b),
-  [`db81eaab`](https://github.com/chakra-ui/zag/commit/db81eaab8c8b06d74cf81d46fa145f4b480b7e82)]:
-  - @zag-js/slider@0.17.0
-  - @zag-js/form-utils@0.17.0
-  - @zag-js/dom-query@0.17.0
-  - @zag-js/dom-event@0.17.0
-  - @zag-js/anatomy@0.17.0
-  - @zag-js/core@0.17.0
-  - @zag-js/types@0.17.0
-  - @zag-js/utils@0.17.0
-  - @zag-js/element-size@0.17.0
-  - @zag-js/numeric-range@0.17.0
-
-## 0.16.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.16.0
-  - @zag-js/core@0.16.0
-  - @zag-js/slider@0.16.0
-  - @zag-js/types@0.16.0
-  - @zag-js/utils@0.16.0
-  - @zag-js/dom-event@0.16.0
-  - @zag-js/dom-query@0.16.0
-  - @zag-js/element-size@0.16.0
-  - @zag-js/form-utils@0.16.0
-  - @zag-js/numeric-range@0.16.0
-
-## 0.15.0
-
-### Minor Changes
-
-- [`4be63ee4`](https://github.com/chakra-ui/zag/commit/4be63ee426b33944ab6a093772536c5aaed78f3e) Thanks
-  [@cschroeter](https://github.com/cschroeter)! - Machines no longer export hiddenInput as part of their anatomy API
-
-### Patch Changes
-
-- Updated dependencies [[`4be63ee4`](https://github.com/chakra-ui/zag/commit/4be63ee426b33944ab6a093772536c5aaed78f3e)]:
-  - @zag-js/slider@0.15.0
-  - @zag-js/anatomy@0.15.0
-  - @zag-js/core@0.15.0
-  - @zag-js/types@0.15.0
-  - @zag-js/utils@0.15.0
-  - @zag-js/dom-event@0.15.0
-  - @zag-js/dom-query@0.15.0
-  - @zag-js/element-size@0.15.0
-  - @zag-js/form-utils@0.15.0
-  - @zag-js/numeric-range@0.15.0
-
-## 0.14.0
-
-### Patch Changes
-
-- [`7cf380b0`](https://github.com/chakra-ui/zag/commit/7cf380b0d3019507181b79e0fe99e894d9e83030) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - - Refactor machines to avoid the use of `dom.queryById`, this
-  causes the machine to throw in React when the `key` of an element is reassigned.
-
-  - Remove `queryById` from the `createScope` function.
-
-- Updated dependencies [[`7cf380b0`](https://github.com/chakra-ui/zag/commit/7cf380b0d3019507181b79e0fe99e894d9e83030)]:
-  - @zag-js/dom-query@0.14.0
-  - @zag-js/slider@0.14.0
-  - @zag-js/dom-event@0.14.0
-  - @zag-js/anatomy@0.14.0
-  - @zag-js/core@0.14.0
-  - @zag-js/types@0.14.0
-  - @zag-js/utils@0.14.0
-  - @zag-js/element-size@0.14.0
-  - @zag-js/form-utils@0.14.0
-  - @zag-js/numeric-range@0.14.0
-
-## 0.13.0
-
-### Patch Changes
-
-- [`91502f27`](https://github.com/chakra-ui/zag/commit/91502f27b8639bf357564cf5cce37367c717115a) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where `minStepsBetweenThumbs` isn't respected when using
-  keyboard
-
-- Updated dependencies [[`4a2d8b77`](https://github.com/chakra-ui/zag/commit/4a2d8b77d1e71ad6b6c10134bc4186db6e6c0414)]:
-  - @zag-js/core@0.13.0
-  - @zag-js/slider@0.13.0
-  - @zag-js/anatomy@0.13.0
-  - @zag-js/types@0.13.0
-  - @zag-js/utils@0.13.0
-  - @zag-js/dom-event@0.13.0
-  - @zag-js/dom-query@0.13.0
-  - @zag-js/element-size@0.13.0
-  - @zag-js/form-utils@0.13.0
-  - @zag-js/numeric-range@0.13.0
-
-## 0.12.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.12.0
-  - @zag-js/core@0.12.0
-  - @zag-js/slider@0.12.0
-  - @zag-js/types@0.12.0
-  - @zag-js/utils@0.12.0
-  - @zag-js/dom-event@0.12.0
-  - @zag-js/dom-query@0.12.0
-  - @zag-js/element-size@0.12.0
-  - @zag-js/form-utils@0.12.0
-  - @zag-js/numeric-range@0.12.0
-
-## 0.11.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.11.2
-  - @zag-js/core@0.11.2
-  - @zag-js/slider@0.11.2
-  - @zag-js/types@0.11.2
-  - @zag-js/utils@0.11.2
-  - @zag-js/dom-event@0.11.2
-  - @zag-js/dom-query@0.11.2
-  - @zag-js/element-size@0.11.2
-  - @zag-js/form-utils@0.11.2
-  - @zag-js/numeric-range@0.11.2
-
-## 0.11.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.11.1
-  - @zag-js/core@0.11.1
-  - @zag-js/slider@0.11.1
-  - @zag-js/types@0.11.1
-  - @zag-js/utils@0.11.1
-  - @zag-js/dom-event@0.11.1
-  - @zag-js/dom-query@0.11.1
-  - @zag-js/element-size@0.11.1
-  - @zag-js/form-utils@0.11.1
-  - @zag-js/numeric-range@0.11.1
-
-## 0.11.0
-
-### Patch Changes
-
-- [`4f371874`](https://github.com/chakra-ui/zag/commit/4f3718742dc88a2cd8726bdd889c9bbde94f5bce) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Rebuild all packages using tsup
-
-- Updated dependencies [[`4f371874`](https://github.com/chakra-ui/zag/commit/4f3718742dc88a2cd8726bdd889c9bbde94f5bce)]:
-  - @zag-js/numeric-range@0.11.0
-  - @zag-js/element-size@0.11.0
-  - @zag-js/form-utils@0.11.0
-  - @zag-js/dom-event@0.11.0
-  - @zag-js/dom-query@0.11.0
-  - @zag-js/slider@0.11.0
-  - @zag-js/utils@0.11.0
-  - @zag-js/anatomy@0.11.0
-  - @zag-js/types@0.11.0
-  - @zag-js/core@0.11.0
-
-## 0.10.5
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.10.5
-  - @zag-js/core@0.10.5
-  - @zag-js/slider@0.10.5
-  - @zag-js/types@0.10.5
-  - @zag-js/utils@0.10.5
-  - @zag-js/dom-event@0.10.5
-  - @zag-js/dom-query@0.10.5
-  - @zag-js/element-size@0.10.5
-  - @zag-js/form-utils@0.10.5
-  - @zag-js/numeric-range@0.10.5
-
-## 0.10.4
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.10.4
-  - @zag-js/core@0.10.4
-  - @zag-js/slider@0.10.4
-  - @zag-js/types@0.10.4
-  - @zag-js/utils@0.10.4
-  - @zag-js/dom-event@0.10.4
-  - @zag-js/dom-query@0.10.4
-  - @zag-js/element-size@0.10.4
-  - @zag-js/form-utils@0.10.4
-  - @zag-js/numeric-range@0.10.4
-
-## 0.10.3
-
-### Patch Changes
-
-- [`c59a8dec`](https://github.com/chakra-ui/zag/commit/c59a8dec15ab57d218823bfe7af6d723972be6c7) Thanks
-  [@cschroeter](https://github.com/cschroeter)! - Use vite to build packages
-
-- Updated dependencies [[`c59a8dec`](https://github.com/chakra-ui/zag/commit/c59a8dec15ab57d218823bfe7af6d723972be6c7),
-  [`775f11c9`](https://github.com/chakra-ui/zag/commit/775f11c96759197fcbad14b5b8a0fbde095efc55)]:
-  - @zag-js/anatomy@0.10.3
-  - @zag-js/core@0.10.3
-  - @zag-js/slider@0.10.3
-  - @zag-js/types@0.10.3
-  - @zag-js/utils@0.10.3
-  - @zag-js/dom-event@0.10.3
-  - @zag-js/dom-query@0.10.3
-  - @zag-js/element-size@0.10.3
-  - @zag-js/form-utils@0.10.3
-  - @zag-js/numeric-range@0.10.3
-
-## 0.10.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.10.2
-  - @zag-js/core@0.10.2
-  - @zag-js/slider@0.10.2
-  - @zag-js/types@0.10.2
-  - @zag-js/utils@0.10.2
-  - @zag-js/dom-event@0.10.2
-  - @zag-js/dom-query@0.10.2
-  - @zag-js/element-size@0.10.2
-  - @zag-js/form-utils@0.10.2
-  - @zag-js/numeric-range@0.10.2
-
-## 0.10.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/anatomy@0.10.1
-  - @zag-js/core@0.10.1
-  - @zag-js/slider@0.10.1
-  - @zag-js/types@0.10.1
-  - @zag-js/utils@0.10.1
-  - @zag-js/dom-event@0.10.1
-  - @zag-js/dom-query@0.10.1
-  - @zag-js/element-size@0.10.1
-  - @zag-js/form-utils@0.10.1
-  - @zag-js/numeric-range@0.10.1
-
-## 0.10.0
-
-### Patch Changes
-
-- [`dbc13547`](https://github.com/chakra-ui/zag/commit/dbc13547deeef869640f637f3c0affab8fb82c17) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor point calculation algorithm
-
-- Updated dependencies [[`dbc13547`](https://github.com/chakra-ui/zag/commit/dbc13547deeef869640f637f3c0affab8fb82c17),
-  [`e8ac03ef`](https://github.com/chakra-ui/zag/commit/e8ac03ef4b820773a5875db861735e2aac8f29da),
-  [`d2838286`](https://github.com/chakra-ui/zag/commit/d2838286fc13acae3f0818653d5feee982703f23),
-  [`2a1fb4a0`](https://github.com/chakra-ui/zag/commit/2a1fb4a0740e6ad8e2902265e14597f087007675),
-  [`a30258e8`](https://github.com/chakra-ui/zag/commit/a30258e8137bfba5811471919e463b79039848b6)]:
-  - @zag-js/dom-event@0.10.0
-  - @zag-js/slider@0.10.0
-  - @zag-js/dom-query@0.10.0
-  - @zag-js/anatomy@0.10.0
-  - @zag-js/types@0.10.0
-  - @zag-js/core@0.10.0
-  - @zag-js/utils@0.10.0
-  - @zag-js/element-size@0.10.0
-  - @zag-js/form-utils@0.10.0
-  - @zag-js/numeric-range@0.10.0
-
-## 0.9.2
-
-### Patch Changes
-
-- [`280015e3`](https://github.com/chakra-ui/zag/commit/280015e36539f23731cba09a28e1371d5760b8b4) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where event point calculation is incorrect when the page
-  is scrolled
-
-- Updated dependencies [[`280015e3`](https://github.com/chakra-ui/zag/commit/280015e36539f23731cba09a28e1371d5760b8b4)]:
-  - @zag-js/dom-event@0.9.2
-  - @zag-js/slider@0.9.2
-  - @zag-js/anatomy@0.9.2
-  - @zag-js/core@0.9.2
-  - @zag-js/types@0.9.2
-  - @zag-js/utils@0.9.2
-  - @zag-js/dom-query@0.9.2
-  - @zag-js/element-size@0.9.2
-  - @zag-js/form-utils@0.9.2
-  - @zag-js/numeric-range@0.9.2
-
-## 0.9.1
-
-### Patch Changes
-
-- [`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Force release every package to fix regression
-
-- Updated dependencies [[`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f)]:
-  - @zag-js/anatomy@0.9.1
-  - @zag-js/core@0.9.1
-  - @zag-js/slider@0.9.1
-  - @zag-js/types@0.9.1
-  - @zag-js/utils@0.9.1
-  - @zag-js/dom-event@0.9.1
-  - @zag-js/dom-query@0.9.1
-  - @zag-js/element-size@0.9.1
-  - @zag-js/form-utils@0.9.1
-  - @zag-js/numeric-range@0.9.1
-
-## 0.9.0
-
-### Patch Changes
-
-- Updated dependencies [[`6274ed5e`](https://github.com/chakra-ui/zag/commit/6274ed5e460400ef7038d2b3b6c1f0ce679ca649)]:
-  - @zag-js/anatomy@0.9.0
-  - @zag-js/slider@0.9.0
-
-## 0.8.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/dom-event@0.8.0
-  - @zag-js/slider@0.8.0
-
-## 0.7.0
-
-### Patch Changes
-
-- [#602](https://github.com/chakra-ui/zag/pull/602)
-  [`f2a1918f`](https://github.com/chakra-ui/zag/commit/f2a1918f994f252e4ac81bc6a801e7094874968a) Thanks
-  [@malangcat](https://github.com/malangcat)! - Ensure consistent props for marker in `Slider` and `RangeSlider`
-
-- [`d3c11c51`](https://github.com/chakra-ui/zag/commit/d3c11c510dedda6d86159ed7e5736d9e7083c028) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Ensure ids of underlying elements can customized based on `ids`
-  context property.
-
-- Updated dependencies [[`f2a1918f`](https://github.com/chakra-ui/zag/commit/f2a1918f994f252e4ac81bc6a801e7094874968a),
-  [`413cdf18`](https://github.com/chakra-ui/zag/commit/413cdf180f718469c9c8b879a43aa4501d1ae59c),
-  [`d3c11c51`](https://github.com/chakra-ui/zag/commit/d3c11c510dedda6d86159ed7e5736d9e7083c028)]:
-  - @zag-js/slider@0.7.0
-  - @zag-js/core@0.7.0
-
-## 0.6.0
-
-### Patch Changes
-
-- Updated dependencies [[`657df96e`](https://github.com/chakra-ui/zag/commit/657df96e0fbc59dcab8d06eb90105519d32b527f)]:
-  - @zag-js/dom-event@0.6.0
-  - @zag-js/slider@0.6.0
-
-## 0.5.0
-
-### Patch Changes
-
-- Updated dependencies [[`ec07ff35`](https://github.com/chakra-ui/zag/commit/ec07ff3590916ebcb4450b64207370ee2af9d3d1),
-  [`54377b1c`](https://github.com/chakra-ui/zag/commit/54377b1c4ed85deb06453a00648b7c2c1f0c72df)]:
-  - @zag-js/core@0.5.0
-  - @zag-js/types@0.5.0
-  - @zag-js/slider@0.5.0
-  - @zag-js/dom-event@0.5.0
-
-## 0.2.17
-
-### Patch Changes
-
-- Updated dependencies [[`30dbeb28`](https://github.com/chakra-ui/zag/commit/30dbeb282f7901c33518097a0e1dd9a857f7efb0)]:
-  - @zag-js/utils@0.3.4
-  - @zag-js/core@0.2.12
-  - @zag-js/slider@0.2.17
-
-## 0.2.16
-
-### Patch Changes
-
-- Updated dependencies [[`1e10b1f4`](https://github.com/chakra-ui/zag/commit/1e10b1f40016f5c9bdf0924a3470b9383c0dbce2)]:
-  - @zag-js/core@0.2.11
-  - @zag-js/slider@0.2.16
-
-## 0.2.15
-
-### Patch Changes
-
-- Updated dependencies [[`1446d88b`](https://github.com/chakra-ui/zag/commit/1446d88bff3848f2a2ec0a793ee83281cda966e8)]:
-  - @zag-js/dom-query@0.1.4
-  - @zag-js/slider@0.2.15
-
-## 0.2.14
-
-### Patch Changes
-
-- [#536](https://github.com/chakra-ui/zag/pull/536)
-  [`aabc9aed`](https://github.com/chakra-ui/zag/commit/aabc9aed93ae3f49e2cec8d8b28edd23a337ce99) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor all packages to have proper dependency structure and
-  bundle size.
-
-- Updated dependencies [[`aabc9aed`](https://github.com/chakra-ui/zag/commit/aabc9aed93ae3f49e2cec8d8b28edd23a337ce99)]:
-  - @zag-js/form-utils@0.2.5
-  - @zag-js/dom-event@0.0.1
-  - @zag-js/dom-query@0.1.3
-  - @zag-js/slider@0.2.14
-  - @zag-js/core@0.2.10
-
-## 0.2.13
-
-### Patch Changes
-
-- Updated dependencies [[`df27f257`](https://github.com/chakra-ui/zag/commit/df27f257f53d194013b528342d3d9aef994d0d5c)]:
-  - @zag-js/core@0.2.9
-  - @zag-js/slider@0.2.13
-
-## 0.2.12
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @zag-js/core@0.2.8
-  - @zag-js/slider@0.2.12
-
-## 0.2.11
-
-### Patch Changes
-
-- [`6957678d`](https://github.com/chakra-ui/zag/commit/6957678d2f00f4d219e791dffed91446e64211e7) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Switch to `es2020` to support `import.meta.env`
-
-- Updated dependencies [[`f7bb988a`](https://github.com/chakra-ui/zag/commit/f7bb988aaeda6c6caebe95823f4cd44baa0d5e78),
-  [`6957678d`](https://github.com/chakra-ui/zag/commit/6957678d2f00f4d219e791dffed91446e64211e7),
-  [`fef822b9`](https://github.com/chakra-ui/zag/commit/fef822b91a4a9dbfc3c1e8f88a89727a3231326a)]:
-  - @zag-js/core@0.2.7
-  - @zag-js/anatomy@0.1.4
-  - @zag-js/slider@0.2.11
-  - @zag-js/types@0.3.4
-  - @zag-js/element-size@0.3.2
-  - @zag-js/form-utils@0.2.4
-  - @zag-js/numeric-range@0.1.1
-
-## 0.2.10
-
-### Patch Changes
-
-- [`88ccbbed`](https://github.com/chakra-ui/zag/commit/88ccbbed937acf10d4338e2c6d7f1e6b9eb538c8) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor connect function to avoid re-creating new objects
-
-- Updated dependencies [[`80de0b7c`](https://github.com/chakra-ui/zag/commit/80de0b7c7f888a254a3e1fec2da5338e235bc699),
-  [`88ccbbed`](https://github.com/chakra-ui/zag/commit/88ccbbed937acf10d4338e2c6d7f1e6b9eb538c8)]:
-  - @zag-js/core@0.2.6
-  - @zag-js/slider@0.2.10
-
-## 0.2.9
-
-### Patch Changes
-
-- [`5f0aef04`](https://github.com/chakra-ui/zag/commit/5f0aef04601bd65ded6b352c8b6695716df8fc3e) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where `this` type throws a `TypeError` when `api`
-  properties are destructured.
-
-- Updated dependencies [[`5f0aef04`](https://github.com/chakra-ui/zag/commit/5f0aef04601bd65ded6b352c8b6695716df8fc3e)]:
-  - @zag-js/slider@0.2.9
-
-## 0.2.8
-
-### Patch Changes
-
-- [#467](https://github.com/chakra-ui/zag/pull/467)
-  [`de1af599`](https://github.com/chakra-ui/zag/commit/de1af599a515d2b0d09ee7c5d92835088ae05201) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - - Redesigned style calculations for consistency
-  - Fixed issue where the thumb cannot go back to its original position when `min` is greater than `0`
-- Updated dependencies [[`c1f609df`](https://github.com/chakra-ui/zag/commit/c1f609dfabbc31c296ebdc1e89480313130f832b),
-  [`c7e85e20`](https://github.com/chakra-ui/zag/commit/c7e85e20d4d08b56852768becf2fc5f7f4275dcc),
-  [`de1af599`](https://github.com/chakra-ui/zag/commit/de1af599a515d2b0d09ee7c5d92835088ae05201),
-  [`de1af599`](https://github.com/chakra-ui/zag/commit/de1af599a515d2b0d09ee7c5d92835088ae05201)]:
-  - @zag-js/types@0.3.3
-  - @zag-js/core@0.2.5
-  - @zag-js/numeric-range@0.1.0
-  - @zag-js/slider@0.2.8
-  - @zag-js/form-utils@0.2.3
-
-## 0.2.7
-
-### Patch Changes
-
-- [`eff42501`](https://github.com/chakra-ui/zag/commit/eff42501dd2ec7b243b2d496bca6111a6d78d610) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Add explicit type annotation to anatomy
-
-- [#462](https://github.com/chakra-ui/zag/pull/462)
-  [`f8c47a2b`](https://github.com/chakra-ui/zag/commit/f8c47a2b4442bfadc4d98315a8c1ac4aa4020822) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Update packages to use explicit `exports` field in `package.json`
-
-- [#454](https://github.com/chakra-ui/zag/pull/454)
-  [`2a601b7f`](https://github.com/chakra-ui/zag/commit/2a601b7f7b79f554ffd3405fdc52b8b8f3c0ae97) Thanks
-  [@anubra266](https://github.com/anubra266)! - Fix negative values offset calculation
-
-- Updated dependencies [[`4c98f016`](https://github.com/chakra-ui/zag/commit/4c98f016ae3d48b1b74f4dc8c302ef9a1c664260),
-  [`ec776276`](https://github.com/chakra-ui/zag/commit/ec77627603f310ca34a659bc250cdcf819a17b91),
-  [`f8c47a2b`](https://github.com/chakra-ui/zag/commit/f8c47a2b4442bfadc4d98315a8c1ac4aa4020822),
-  [`5799fcb5`](https://github.com/chakra-ui/zag/commit/5799fcb520a7956dc7ef1a9bc7aaa8dff85fa592)]:
-  - @zag-js/core@0.2.4
-  - @zag-js/anatomy@0.1.3
-  - @zag-js/slider@0.2.7
-  - @zag-js/types@0.3.2
-  - @zag-js/element-size@0.3.1
-
-## 0.2.6
-
-### Patch Changes
-
-- Updated dependencies [[`5bd24f02`](https://github.com/chakra-ui/zag/commit/5bd24f02fcab355f7df8a2d5cea3b155155380f8)]:
-  - @zag-js/anatomy@0.1.2
-  - @zag-js/slider@0.2.6
-
-## 0.2.5
-
-### Patch Changes
-
-- [`af4ab9bb`](https://github.com/chakra-ui/zag/commit/af4ab9bb7cd599c53e47ca7ed2ea90a4ff742499) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Update anatomy of components
-
-- Updated dependencies [[`9d936614`](https://github.com/chakra-ui/zag/commit/9d93661439f10a550c154e9f290905d32e8f509b),
-  [`af4ab9bb`](https://github.com/chakra-ui/zag/commit/af4ab9bb7cd599c53e47ca7ed2ea90a4ff742499)]:
-  - @zag-js/core@0.2.3
-  - @zag-js/slider@0.2.5
-
-## 0.2.4
-
-### Patch Changes
-
-- [#426](https://github.com/chakra-ui/zag/pull/426)
-  [`dc848b83`](https://github.com/chakra-ui/zag/commit/dc848b83c20767ed87e38490515289a72f4da03b) Thanks
-  [@anubra266](https://github.com/anubra266)! - Change `values` to `value`
-
-- [#416](https://github.com/chakra-ui/zag/pull/416)
-  [`5e0e0ff5`](https://github.com/chakra-ui/zag/commit/5e0e0ff57c15c173bbf5f38e4e0dac117b47739b) Thanks
-  [@cschroeter](https://github.com/cschroeter)! - Describe the anatomy of a machine and use it to generate data-scope
-  and data-part
-
-- Updated dependencies [[`5e0e0ff5`](https://github.com/chakra-ui/zag/commit/5e0e0ff57c15c173bbf5f38e4e0dac117b47739b)]:
-  - @zag-js/anatomy@0.1.1
-  - @zag-js/slider@0.2.4
-
-## 0.2.3
-
-### Patch Changes
-
-- [#400](https://github.com/chakra-ui/zag/pull/400)
-  [`29f24231`](https://github.com/chakra-ui/zag/commit/29f242317df9fff2af04b83b618f6577cbdbb713) Thanks
-  [@anubra266](https://github.com/anubra266)! - Add support for `form` attribute
-
-- [`985d9b26`](https://github.com/chakra-ui/zag/commit/985d9b26a9db7e585ff504bbaa88de6835cf3fd0) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Ensure consistent API naming for `readonly` by renaming it to
-  `readOnly`
-
-- [#398](https://github.com/chakra-ui/zag/pull/398)
-  [`5706d503`](https://github.com/chakra-ui/zag/commit/5706d5036db101ec7fd6dcb9a9065461aad0225c) Thanks
-  [@anubra266](https://github.com/anubra266)! - Refactor machine to simplify form-utils approach
-
-- Updated dependencies [[`29f24231`](https://github.com/chakra-ui/zag/commit/29f242317df9fff2af04b83b618f6577cbdbb713),
-  [`985d9b26`](https://github.com/chakra-ui/zag/commit/985d9b26a9db7e585ff504bbaa88de6835cf3fd0),
-  [`5706d503`](https://github.com/chakra-ui/zag/commit/5706d5036db101ec7fd6dcb9a9065461aad0225c)]:
-  - @zag-js/slider@0.2.3
-
-## 0.2.2
-
-### Patch Changes
-
-- Updated dependencies [[`44feef0b`](https://github.com/chakra-ui/zag/commit/44feef0bdf312e27d6faf1aa8ab0ecff0281108c),
-  [`810e7d85`](https://github.com/chakra-ui/zag/commit/810e7d85274a26e0fe76dbdb2829fd7ab7f982a6),
-  [`e328b306`](https://github.com/chakra-ui/zag/commit/e328b306bf06d151fff4907a7e8e1160f07af855),
-  [`65976dd5`](https://github.com/chakra-ui/zag/commit/65976dd51902b1c4a4460cd196467156a705a999)]:
-  - @zag-js/core@0.2.2
-  - @zag-js/types@0.3.1
-  - @zag-js/slider@0.2.2
-
-## 0.2.1
-
-### Patch Changes
-
-- [#381](https://github.com/chakra-ui/zag/pull/381)
-  [`21775db5`](https://github.com/chakra-ui/zag/commit/21775db5ac318b095f603e7030ec7645e104f663) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Omit undefined values passed in machine's context
-
-- Updated dependencies [[`4aa6955f`](https://github.com/chakra-ui/zag/commit/4aa6955fab7ff6fee8545dcf491576640c69c64e),
-  [`21775db5`](https://github.com/chakra-ui/zag/commit/21775db5ac318b095f603e7030ec7645e104f663)]:
-  - @zag-js/core@0.2.1
-  - @zag-js/slider@0.2.1
-
-## 0.2.0
-
-### Minor Changes
-
-- [#375](https://github.com/chakra-ui/zag/pull/375)
-  [`9cb4e9de`](https://github.com/chakra-ui/zag/commit/9cb4e9de28a3c6666860bc068c86be67a3b1a2ca) Thanks
-  [@darrylblake](https://github.com/darrylblake)! - Ensures code is transpiled with `es2019` target for environments
-  that don't support `es2020` and up, i.e. Cypress.
-
-### Patch Changes
-
-- Updated dependencies [[`9cb4e9de`](https://github.com/chakra-ui/zag/commit/9cb4e9de28a3c6666860bc068c86be67a3b1a2ca)]:
-  - @zag-js/core@0.2.0
-  - @zag-js/slider@0.2.0
-  - @zag-js/types@0.3.0
-  - @zag-js/element-size@0.3.0
-
-## 0.1.16
-
-### Patch Changes
-
-- [`52552156`](https://github.com/chakra-ui/zag/commit/52552156ded1b00f873576f52b11d0414f5dfee7) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Force new release
-
-- Updated dependencies [[`52552156`](https://github.com/chakra-ui/zag/commit/52552156ded1b00f873576f52b11d0414f5dfee7)]:
-  - @zag-js/core@0.1.12
-  - @zag-js/slider@0.1.16
-  - @zag-js/types@0.2.7
-  - @zag-js/element-size@0.2.3
-
-## 0.1.15
-
-### Patch Changes
-
-- [#325](https://github.com/chakra-ui/zag/pull/325)
-  [`c0cc303e`](https://github.com/chakra-ui/zag/commit/c0cc303e9824ea395c06d9faa699d23e19ef6538) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Switch packages to use ESM and `type=module`
-
-- Updated dependencies [[`61c11646`](https://github.com/chakra-ui/zag/commit/61c116467c1758bdda7efe1f27d4ed26e7d44624),
-  [`c0cc303e`](https://github.com/chakra-ui/zag/commit/c0cc303e9824ea395c06d9faa699d23e19ef6538)]:
-  - @zag-js/core@0.1.11
-  - @zag-js/slider@0.1.15
-  - @zag-js/types@0.2.6
-  - @zag-js/element-size@0.2.2
-
-## 0.1.14
-
-### Patch Changes
-
-- [`55e6a55c`](https://github.com/chakra-ui/zag/commit/55e6a55c37a60eea5caa446270cd1f6012d7363d) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Bump all packages
-
-- Updated dependencies [[`ce97956c`](https://github.com/chakra-ui/zag/commit/ce97956c0586ce842f7b082dd71cc6d68909ad58),
-  [`55e6a55c`](https://github.com/chakra-ui/zag/commit/55e6a55c37a60eea5caa446270cd1f6012d7363d)]:
-  - @zag-js/core@0.1.10
-  - @zag-js/slider@0.1.14
-  - @zag-js/types@0.2.5
-  - @zag-js/element-size@0.2.1
-
-## 0.1.13
-
-### Patch Changes
-
-- [#261](https://github.com/chakra-ui/zag/pull/261)
-  [`16cf349c`](https://github.com/chakra-ui/zag/commit/16cf349c76271329f97fe81b81cde5914fddda2e) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - - Add support for observing size of slider thumbs
-  - Add support for dynamic sliders
-- Updated dependencies [[`16cf349c`](https://github.com/chakra-ui/zag/commit/16cf349c76271329f97fe81b81cde5914fddda2e),
-  [`d81885dc`](https://github.com/chakra-ui/zag/commit/d81885dc1b4e8674d7be0801ee3ab8a55e3ffeb5),
-  [`1d30333e`](https://github.com/chakra-ui/zag/commit/1d30333e0d3011707950adab26878cde9ed1c242)]:
-  - @zag-js/slider@0.1.13
-  - @zag-js/element-size@0.2.0
-  - @zag-js/types@0.2.4
-
-## 0.1.12
-
-### Patch Changes
-
-- [#247](https://github.com/chakra-ui/zag/pull/247)
-  [`b3c768cd`](https://github.com/chakra-ui/zag/commit/b3c768cd8605c8964acc966d29075e1f845ee0ff) Thanks
-  [@anubra266](https://github.com/anubra266)! - Refactor form utilitities into new package
-
-- Updated dependencies [[`b3c768cd`](https://github.com/chakra-ui/zag/commit/b3c768cd8605c8964acc966d29075e1f845ee0ff)]:
-  - @zag-js/slider@0.1.12
-
-## 0.1.11
-
-### Patch Changes
-
-- [`2a2566b8`](https://github.com/chakra-ui/zag/commit/2a2566b8be1441ae98215bec594e4c996f3b8aaf) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Trigger new version due to changes in build chain
-
-- Updated dependencies [[`2a2566b8`](https://github.com/chakra-ui/zag/commit/2a2566b8be1441ae98215bec594e4c996f3b8aaf)]:
-  - @zag-js/core@0.1.9
-  - @zag-js/slider@0.1.11
-  - @zag-js/types@0.2.3
-
-## 0.1.10
-
-### Patch Changes
-
-- [#202](https://github.com/chakra-ui/zag/pull/202)
-  [`ef8a7386`](https://github.com/chakra-ui/zag/commit/ef8a7386ccf4de3431c785b310670da105788597) Thanks
-  [@anubra266](https://github.com/anubra266)! - Refactor machine dom to use `getById`
-
-* [#191](https://github.com/chakra-ui/zag/pull/191)
-  [`66cb9c99`](https://github.com/chakra-ui/zag/commit/66cb9c998662fd049590d51cfdcd79f03e2f582b) Thanks
-  [@anubra266](https://github.com/anubra266)! - Improve SSR by omitting the setup step.
-
-* Updated dependencies [[`0e750fa1`](https://github.com/chakra-ui/zag/commit/0e750fa1e8d17f495f7d9fda10385819ac762c7b),
-  [`66cb9c99`](https://github.com/chakra-ui/zag/commit/66cb9c998662fd049590d51cfdcd79f03e2f582b),
-  [`ef8a7386`](https://github.com/chakra-ui/zag/commit/ef8a7386ccf4de3431c785b310670da105788597),
-  [`c5872be2`](https://github.com/chakra-ui/zag/commit/c5872be2fe057675fb8c7c64ed2c10b99daf697e),
-  [`66cb9c99`](https://github.com/chakra-ui/zag/commit/66cb9c998662fd049590d51cfdcd79f03e2f582b)]:
-  - @zag-js/types@0.2.2
-  - @zag-js/slider@0.1.10
-  - @zag-js/core@0.1.8
-
-## 0.1.9
-
-### Patch Changes
-
-- [#178](https://github.com/chakra-ui/zag/pull/178)
-  [`1abed11b`](https://github.com/chakra-ui/zag/commit/1abed11bda7fc56fd3f77c3b842e89a934ee3253) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - BREAKING 💥: Refactor connect function in favor of uniform APIs
-  across frameworks
-
-  Due to the fact that we tried to make "React" the baseline, there was a lot of inherent complexity in how we managed
-  types in the codebase.
-
-  We've now removed the `PropTypes` export in favor of passing `normalizeProps` in the `api.connect` function. This is
-  now required for React as well.
-
-  You can remove the `<PropTypes>` generic and Zag will auto-infer the types from `normalizeProps`.
-
-  **For Vue and Solid**
-
-  ```diff
-  -api.connect<PropTypes>(state, send, normalizeProps)
-  +api.connect(state, send, normalizeProps)
-  ```
-
-  **For React**
-
-  ```diff
-  -api.connect(state, send)
-  +api.connect(state, send, normalizeProps)
-  ```
-
-* [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Bump versions
-
-- [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where pointer position is incorrent when wrapped in
-  non-static parent
-
-- Updated dependencies [[`1abed11b`](https://github.com/chakra-ui/zag/commit/1abed11bda7fc56fd3f77c3b842e89a934ee3253),
-  [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4),
-  [`86155fc0`](https://github.com/chakra-ui/zag/commit/86155fc039cc90fc05c9ce024f8c799e03fde11d),
-  [`664e61f9`](https://github.com/chakra-ui/zag/commit/664e61f94844f0405b7e646e4a30b8f0f737f21c),
-  [`3a53a1e9`](https://github.com/chakra-ui/zag/commit/3a53a1e97306a9fedf1706b95f8e38b03750c2f3),
-  [`b91a3a5c`](https://github.com/chakra-ui/zag/commit/b91a3a5cb56f4e25c46fdfcf8ff0fe0a41d75e66),
-  [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4)]:
-  - @zag-js/core@0.1.7
-  - @zag-js/slider@0.1.9
-  - @zag-js/types@0.2.1
-  - @zag-js/dom-utils@0.1.6
-  - @zag-js/rect-utils@0.1.3
-
-## 0.1.8
-
-### Patch Changes
-
-- [#132](https://github.com/chakra-ui/zag/pull/132)
-  [`d31abf77`](https://github.com/chakra-ui/zag/commit/d31abf770c0a718a5cd2a81dec6aea256b762185) Thanks
-  [@anubra266](https://github.com/anubra266)! - Fix issue where `disabled` is always false by default
-
-* [#122](https://github.com/chakra-ui/zag/pull/122)
-  [`8f27a2af`](https://github.com/chakra-ui/zag/commit/8f27a2af2fd9d976178fdd2b78e925bf11ad9458) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Refactor styles and hoist CSS variables to `root` part
-
-- [`cc8c7ad9`](https://github.com/chakra-ui/zag/commit/cc8c7ad9c3c5a5b4d4cde114a666eab0685b0d34) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Add missing attribute to slider and range slider components
-
-* [`49b666ad`](https://github.com/chakra-ui/zag/commit/49b666ad40b3a91057a9f8935c34a7edc5cc6b59) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Add support for changing the slider thumb alignment via the
-  `thumbAlignment` context property. The value can be set to either `center` or `contain`.
-
-  - `center`: the thumb will extend beyond the bounds of the slider track.
-  - `contain`: the thumb will be contained within the bounds of the track.
-
-* Updated dependencies [[`d31abf77`](https://github.com/chakra-ui/zag/commit/d31abf770c0a718a5cd2a81dec6aea256b762185),
-  [`8f27a2af`](https://github.com/chakra-ui/zag/commit/8f27a2af2fd9d976178fdd2b78e925bf11ad9458),
-  [`cc8c7ad9`](https://github.com/chakra-ui/zag/commit/cc8c7ad9c3c5a5b4d4cde114a666eab0685b0d34),
-  [`01a4a520`](https://github.com/chakra-ui/zag/commit/01a4a520abdc2ec88b205acee6d1b25265d5fd3f),
-  [`0d2911af`](https://github.com/chakra-ui/zag/commit/0d2911af381bacc9151845e5312f62a5aa2999b2),
-  [`49b666ad`](https://github.com/chakra-ui/zag/commit/49b666ad40b3a91057a9f8935c34a7edc5cc6b59)]:
-  - @zag-js/slider@0.1.8
-  - @zag-js/dom-utils@0.1.5
-  - @zag-js/types@0.2.0
-
-## 0.1.7
-
-### Patch Changes
-
-- [`dfae8e35`](https://github.com/chakra-ui/zag/commit/dfae8e351f1851d91a2d5508bd1a875be180c73d) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Cleanup types
-
-- Updated dependencies [[`dfae8e35`](https://github.com/chakra-ui/zag/commit/dfae8e351f1851d91a2d5508bd1a875be180c73d),
-  [`f0fb09f9`](https://github.com/chakra-ui/zag/commit/f0fb09f9bfa6a7919d078c66cf14930acab6bdfd),
-  [`5982d826`](https://github.com/chakra-ui/zag/commit/5982d826126a7b83252fcd0b0479079fccb62189),
-  [`e2f62c7a`](https://github.com/chakra-ui/zag/commit/e2f62c7a30266e7e2c8b1b10b55a22fb979199ed),
-  [`ef2872d7`](https://github.com/chakra-ui/zag/commit/ef2872d7b291fa39c6b6293ae12f522d811a2190),
-  [`63c1e3a9`](https://github.com/chakra-ui/zag/commit/63c1e3a996832ccf55e9a3cc1015d05b6ba927e2)]:
-  - @zag-js/slider@0.1.7
-  - @zag-js/dom-utils@0.1.4
-  - @zag-js/core@0.1.6
-  - @zag-js/utils@0.1.2
-  - @zag-js/rect-utils@0.1.2
-
-## 0.1.6
-
-### Patch Changes
-
-- [`0c424958`](https://github.com/chakra-ui/zag/commit/0c4249584cb7db86474e51441210a6dc6d131d70) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Deprecate scripted update activity in favor of tracking closest
-  fieldset disabled property
-
-- Updated dependencies [[`cf14f6e9`](https://github.com/chakra-ui/zag/commit/cf14f6e971460bed8a65ae061492446cd47d41c0),
-  [`0d3065e9`](https://github.com/chakra-ui/zag/commit/0d3065e94d707d3161d901576421beae66c32aba),
-  [`0c424958`](https://github.com/chakra-ui/zag/commit/0c4249584cb7db86474e51441210a6dc6d131d70),
-  [`eafec246`](https://github.com/chakra-ui/zag/commit/eafec246b5dfb0c9f4cc421974a8bfa651fe81f0),
-  [`587cbec9`](https://github.com/chakra-ui/zag/commit/587cbec9b32ee9e8faef5ceeefb779231b152018)]:
-  - @zag-js/types@0.1.2
-  - @zag-js/core@0.1.5
-  - @zag-js/slider@0.1.6
-  - @zag-js/dom-utils@0.1.3
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [[`1274891d`](https://github.com/chakra-ui/zag/commit/1274891dc06ea869dd2db78685aab252b7baec91)]:
-  - @zag-js/dom-utils@0.1.2
-  - @zag-js/slider@0.1.5
-
-## 0.1.4
-
-### Patch Changes
-
-- [#89](https://github.com/chakra-ui/zag/pull/89)
-  [`a71d5d2a`](https://github.com/chakra-ui/zag/commit/a71d5d2a984e4293ebeb55944e27df20492ad1c0) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Add incremental support for shadow root in machines
-
-- Updated dependencies [[`bcf247f1`](https://github.com/chakra-ui/zag/commit/bcf247f18afa5413a7b008f5ab5cbd3665350cb9),
-  [`a71d5d2a`](https://github.com/chakra-ui/zag/commit/a71d5d2a984e4293ebeb55944e27df20492ad1c0),
-  [`65df1e9a`](https://github.com/chakra-ui/zag/commit/65df1e9ad8948ee6e09519d1136f8178b693f277)]:
-  - @zag-js/core@0.1.4
-  - @zag-js/slider@0.1.4
-  - @zag-js/types@0.1.1
-  - @zag-js/number-utils@0.1.2
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [[`c1a1d41`](https://github.com/chakra-ui/zag/commit/c1a1d4121b5add1b0195633261e9f6b1aca0ff2f),
-  [`c53fb27`](https://github.com/chakra-ui/zag/commit/c53fb27d230ff972ef74458f60358d85f6007695),
-  [`6e175c6`](https://github.com/chakra-ui/zag/commit/6e175c6a69bb70fb78ccdd77a25d83a164298888),
-  [`46ef565`](https://github.com/chakra-ui/zag/commit/46ef5659a855a382af1e5b0e24d35d03466cfb22)]:
-  - @zag-js/dom-utils@0.1.1
-  - @zag-js/number-utils@0.1.1
-  - @zag-js/utils@0.1.1
-  - @zag-js/core@0.1.3
-  - @zag-js/slider@0.1.3
-  - @zag-js/rect-utils@0.1.1
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [[`3f715bd`](https://github.com/chakra-ui/zag/commit/3f715bdc4f52cdbf71ce9a22a3fc20d31c5fea89)]:
-  - @zag-js/core@0.1.2
-  - @zag-js/slider@0.1.2
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [[`8ef855e`](https://github.com/chakra-ui/zag/commit/8ef855efdf8aaca4355c816cc446bc745e34ec54)]:
-  - @zag-js/core@0.1.1
-  - @zag-js/slider@0.1.1
-
-## 0.1.0
-
-### Minor Changes
-
-- [`157aadc`](https://github.com/chakra-ui/zag/commit/157aadc3ac572d2289432efe32ae3f15a2be4ad1) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Initial release
-
-### Patch Changes
-
-- Updated dependencies [[`157aadc`](https://github.com/chakra-ui/zag/commit/157aadc3ac572d2289432efe32ae3f15a2be4ad1)]:
-  - @zag-js/core@0.1.0
-  - @zag-js/slider@0.1.0
-  - @zag-js/types@0.1.0
-  - @zag-js/utils@0.1.0
-  - @zag-js/dom-utils@0.1.0
-  - @zag-js/number-utils@0.1.0
-  - @zag-js/rect-utils@0.1.0
diff --git a/packages/machines/range-slider/README.md b/packages/machines/range-slider/README.md
deleted file mode 100644
index 209ecddcd1..0000000000
--- a/packages/machines/range-slider/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# @zag-js/range-slider
-
-Core logic for the range-slider widget implemented as a state machine
-
-## Installation
-
-```sh
-yarn add  @zag-js/range-slider
-# or
-npm i  @zag-js/range-slider
-```
-
-## Contribution
-
-Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
-
-## Licence
-
-This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).
diff --git a/packages/machines/range-slider/package.json b/packages/machines/range-slider/package.json
deleted file mode 100644
index 72581f91cf..0000000000
--- a/packages/machines/range-slider/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "@zag-js/range-slider",
-  "version": "0.24.0",
-  "description": "Core logic for the range-slider widget implemented as a state machine",
-  "keywords": [
-    "js",
-    "machine",
-    "xstate",
-    "statechart",
-    "component",
-    "chakra-ui",
-    "range-slider"
-  ],
-  "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/range-slider",
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "bugs": {
-    "url": "https://github.com/chakra-ui/zag/issues"
-  },
-  "dependencies": {
-    "@zag-js/anatomy": "workspace:*",
-    "@zag-js/core": "workspace:*",
-    "@zag-js/form-utils": "workspace:*",
-    "@zag-js/dom-query": "workspace:*",
-    "@zag-js/dom-event": "workspace:*",
-    "@zag-js/utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
-    "@zag-js/element-size": "workspace:*",
-    "@zag-js/slider": "workspace:*",
-    "@zag-js/types": "workspace:*"
-  },
-  "devDependencies": {
-    "clean-package": "2.2.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "lint": "eslint src --ext .ts,.tsx",
-    "typecheck": "tsc --noEmit",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore"
-  },
-  "clean-package": "../../../clean-package.config.json",
-  "main": "src/index.ts"
-}
diff --git a/packages/machines/range-slider/src/index.ts b/packages/machines/range-slider/src/index.ts
deleted file mode 100644
index 5db9ea2ea7..0000000000
--- a/packages/machines/range-slider/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { anatomy } from "./range-slider.anatomy"
-export { connect } from "./range-slider.connect"
-export { machine } from "./range-slider.machine"
-export type { UserDefinedContext as Context, MachineApi as Api } from "./range-slider.types"
diff --git a/packages/machines/range-slider/src/range-slider.anatomy.ts b/packages/machines/range-slider/src/range-slider.anatomy.ts
deleted file mode 100644
index 061ee34af1..0000000000
--- a/packages/machines/range-slider/src/range-slider.anatomy.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createAnatomy } from "@zag-js/anatomy"
-
-export const anatomy = createAnatomy("range-slider").parts(
-  "root",
-  "label",
-  "thumb",
-  "output",
-  "track",
-  "range",
-  "control",
-  "markerGroup",
-  "marker",
-)
-export const parts = anatomy.build()
diff --git a/packages/machines/range-slider/src/range-slider.connect.ts b/packages/machines/range-slider/src/range-slider.connect.ts
deleted file mode 100644
index 9f2355f9de..0000000000
--- a/packages/machines/range-slider/src/range-slider.connect.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import {
-  getEventKey,
-  getEventPoint,
-  getEventStep,
-  getNativeEvent,
-  isLeftClick,
-  isModifiedEvent,
-  type EventKeyMap,
-} 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 "./range-slider.anatomy"
-import { dom } from "./range-slider.dom"
-import type { MachineApi, Send, State } from "./range-slider.types"
-import { getRangeAtIndex } from "./range-slider.utils"
-
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const ariaLabel = state.context["aria-label"]
-  const ariaLabelledBy = state.context["aria-labelledby"]
-  const sliderValue = state.context.value
-
-  const isFocused = state.matches("focus")
-  const isDragging = state.matches("dragging")
-
-  const isDisabled = state.context.isDisabled
-  const isInvalid = state.context.invalid
-  const isInteractive = state.context.isInteractive
-
-  function getValuePercentFn(value: number) {
-    return getValuePercent(value, state.context.min, state.context.max)
-  }
-
-  function getPercentValueFn(percent: number) {
-    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
-  }
-
-  return {
-    value: state.context.value,
-    isDragging,
-    isFocused,
-
-    setValue(value: number[]) {
-      send({ type: "SET_VALUE", value: value })
-    },
-
-    getThumbValue(index: number) {
-      return sliderValue[index]
-    },
-
-    setThumbValue(index: number, value: number) {
-      send({ type: "SET_VALUE", index, value })
-    },
-
-    getValuePercent: getValuePercentFn,
-
-    getPercentValue: getPercentValueFn,
-
-    getThumbPercent(index: number) {
-      return getValuePercentFn(sliderValue[index])
-    },
-
-    setThumbPercent(index: number, percent: number) {
-      const value = getPercentValueFn(percent)
-      send({ type: "SET_VALUE", index, value })
-    },
-
-    getThumbMin(index: number) {
-      return getRangeAtIndex(state.context, index).min
-    },
-
-    getThumbMax(index: number) {
-      return getRangeAtIndex(state.context, index).max
-    },
-
-    increment(index: number) {
-      send({ type: "INCREMENT", index })
-    },
-
-    decrement(index: number) {
-      send({ type: "DECREMENT", index })
-    },
-
-    focus() {
-      if (!isInteractive) return
-      send({ type: "FOCUS", index: 0 })
-    },
-
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context, 0),
-      onClick(event) {
-        if (!isInteractive) return
-        event.preventDefault()
-        dom.getFirstEl(state.context)?.focus()
-      },
-      style: {
-        userSelect: "none",
-      },
-    }),
-
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: dom.getRootStyle(state.context),
-    }),
-
-    outputProps: normalize.output({
-      ...parts.output.attrs,
-      dir: state.context.dir,
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      id: dom.getOutputId(state.context),
-      htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "),
-      "aria-live": "off",
-    }),
-
-    trackProps: normalize.element({
-      ...parts.track.attrs,
-      dir: state.context.dir,
-      id: dom.getTrackId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      style: { position: "relative" },
-    }),
-
-    getThumbProps(index: number) {
-      const value = sliderValue[index]
-      const range = getRangeAtIndex(state.context, index)
-      const ariaValueText = state.context.getAriaValueText?.(value, index)
-      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel
-      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy
-
-      return normalize.element({
-        ...parts.thumb.attrs,
-        dir: state.context.dir,
-        "data-index": index,
-        id: dom.getThumbId(state.context, index),
-        "data-disabled": dataAttr(isDisabled),
-        "data-orientation": state.context.orientation,
-        "data-focus": dataAttr(isFocused && state.context.focusedIndex === index),
-        draggable: false,
-        "aria-disabled": ariaAttr(isDisabled),
-        "aria-label": _ariaLabel,
-        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
-        "aria-orientation": state.context.orientation,
-        "aria-valuemax": range.max,
-        "aria-valuemin": range.min,
-        "aria-valuenow": sliderValue[index],
-        "aria-valuetext": ariaValueText,
-        role: "slider",
-        tabIndex: isDisabled ? undefined : 0,
-        style: dom.getThumbStyle(state.context, index),
-        onPointerDown(event) {
-          if (!isInteractive) return
-          send({ type: "THUMB_POINTER_DOWN", index })
-          event.stopPropagation()
-        },
-        onBlur() {
-          if (!isInteractive) return
-          send("BLUR")
-        },
-        onFocus() {
-          if (!isInteractive) return
-          send({ type: "FOCUS", index })
-        },
-        onKeyDown(event) {
-          if (!isInteractive) return
-          const step = getEventStep(event) * state.context.step
-          let prevent = true
-          const keyMap: 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()
-            event.stopPropagation()
-          }
-        },
-      })
-    },
-
-    getHiddenInputProps(index: number) {
-      return normalize.input({
-        name: `${state.context.name}[${index}]`,
-        form: state.context.form,
-        type: "text",
-        hidden: true,
-        defaultValue: state.context.value[index],
-        id: dom.getHiddenInputId(state.context, index),
-      })
-    },
-
-    rangeProps: normalize.element({
-      id: dom.getRangeId(state.context),
-      ...parts.range.attrs,
-      dir: state.context.dir,
-      "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,
-      dir: state.context.dir,
-      id: dom.getControlId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      style: dom.getControlStyle(),
-      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()
-      },
-    }),
-
-    markerGroupProps: normalize.element({
-      ...parts.markerGroup.attrs,
-      role: "presentation",
-      dir: state.context.dir,
-      "aria-hidden": true,
-      "data-orientation": state.context.orientation,
-      style: dom.getMarkerGroupStyle(),
-    }),
-
-    getMarkerProps({ value }: { value: number }) {
-      const style = dom.getMarkerStyle(state.context, value)
-      let markerState: "over-value" | "under-value" | "at-value"
-
-      const first = state.context.value[0]
-      const last = state.context.value[state.context.value.length - 1]
-
-      if (value < first) {
-        markerState = "under-value"
-      } else if (value > last) {
-        markerState = "over-value"
-      } else {
-        markerState = "at-value"
-      }
-
-      return normalize.element({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(state.context, value),
-        role: "presentation",
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
-        "data-value": value,
-        "data-disabled": dataAttr(isDisabled),
-        "data-state": markerState,
-        style,
-      })
-    },
-  }
-}
diff --git a/packages/machines/range-slider/src/range-slider.dom.ts b/packages/machines/range-slider/src/range-slider.dom.ts
deleted file mode 100644
index 5ea3f588b7..0000000000
--- a/packages/machines/range-slider/src/range-slider.dom.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { getRelativePoint, type Point } from "@zag-js/dom-event"
-import { createScope, queryAll } from "@zag-js/dom-query"
-import { dispatchInputValueEvent } from "@zag-js/form-utils"
-import { getPercentValue } from "@zag-js/numeric-range"
-import { styleGetterFns } from "./range-slider.style"
-import type { MachineContext as Ctx } from "./range-slider.types"
-
-export const dom = createScope({
-  ...styleGetterFns,
-  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx: Ctx, index: number) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
-  getHiddenInputId: (ctx: Ctx, index: number) => `slider:${ctx.id}:input:${index}`,
-  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
-  getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
-  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
-  getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
-
-  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx: Ctx, index: number) => dom.getById(ctx, dom.getThumbId(ctx, index)),
-  getHiddenInputEl: (ctx: Ctx, index: number) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx, index)),
-  getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getElements: (ctx: Ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
-  getFirstEl: (ctx: Ctx) => dom.getElements(ctx)[0],
-  getRangeEl: (ctx: Ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
-
-  getValueFromPoint(ctx: Ctx, point: Point) {
-    const controlEl = dom.getControlEl(ctx)
-    if (!controlEl) return
-    const relativePoint = getRelativePoint(point, controlEl)
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true },
-    })
-    return getPercentValue(percent, ctx.min, ctx.max, ctx.step)
-  },
-  dispatchChangeEvent(ctx: Ctx) {
-    const valueArray = Array.from(ctx.value)
-    valueArray.forEach((value, index) => {
-      const inputEl = dom.getHiddenInputEl(ctx, index)
-      if (!inputEl) return
-      dispatchInputValueEvent(inputEl, { value })
-    })
-  },
-})
diff --git a/packages/machines/range-slider/src/range-slider.machine.ts b/packages/machines/range-slider/src/range-slider.machine.ts
deleted file mode 100644
index 9d73b4b6b4..0000000000
--- a/packages/machines/range-slider/src/range-slider.machine.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-import { createMachine } from "@zag-js/core"
-import { trackPointerMove } from "@zag-js/dom-event"
-import { raf } from "@zag-js/dom-query"
-import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
-import { trackFormControl } from "@zag-js/form-utils"
-import { getValuePercent } from "@zag-js/numeric-range"
-import { compact, isEqual } from "@zag-js/utils"
-import { dom } from "./range-slider.dom"
-import type { MachineContext, MachineState, UserDefinedContext } from "./range-slider.types"
-import {
-  assignArray,
-  constrainValue,
-  decrement,
-  getClosestIndex,
-  getRangeAtIndex,
-  increment,
-  normalizeValues,
-} from "./range-slider.utils"
-
-const isEqualSize = (a: ElementSize | null, b: ElementSize | null) => {
-  return a?.width === b?.width && a?.height === b?.height
-}
-
-export function machine(userContext: UserDefinedContext) {
-  const ctx = compact(userContext)
-  return createMachine<MachineContext, MachineState>(
-    {
-      id: "range-slider",
-      initial: "idle",
-
-      context: {
-        thumbSize: null,
-        thumbAlignment: "contain",
-        threshold: 5,
-        focusedIndex: -1,
-        min: 0,
-        max: 100,
-        step: 1,
-        value: [0, 100],
-        orientation: "horizontal",
-        dir: "ltr",
-        minStepsBetweenThumbs: 0,
-        disabled: false,
-        ...ctx,
-        fieldsetDisabled: false,
-      },
-
-      computed: {
-        isHorizontal: (ctx) => ctx.orientation === "horizontal",
-        isVertical: (ctx) => ctx.orientation === "vertical",
-        isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
-        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
-        isInteractive: (ctx) => !(ctx.readOnly || ctx.isDisabled),
-        spacing: (ctx) => ctx.minStepsBetweenThumbs * ctx.step,
-        hasMeasuredThumbSize: (ctx) => ctx.thumbSize != null,
-        valuePercent(ctx) {
-          return ctx.value.map((value) => 100 * getValuePercent(value, ctx.min, ctx.max))
-        },
-      },
-
-      watch: {
-        value: ["syncInputElements"],
-      },
-
-      entry: ["coarseValue"],
-
-      activities: ["trackFormControlState", "trackThumbsSize"],
-
-      on: {
-        SET_VALUE: [
-          {
-            guard: "hasIndex",
-            actions: "setValueAtIndex",
-          },
-          { actions: "setValue" },
-        ],
-        INCREMENT: {
-          actions: "incrementAtIndex",
-        },
-        DECREMENT: {
-          actions: "decrementAtIndex",
-        },
-      },
-
-      states: {
-        idle: {
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "invokeOnChangeStart", "focusActiveThumb"],
-            },
-            FOCUS: {
-              target: "focus",
-              actions: "setFocusedIndex",
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "invokeOnChangeStart", "focusActiveThumb"],
-            },
-          },
-        },
-        focus: {
-          entry: "focusActiveThumb",
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "invokeOnChangeStart", "focusActiveThumb"],
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "invokeOnChangeStart", "focusActiveThumb"],
-            },
-            ARROW_LEFT: {
-              guard: "isHorizontal",
-              actions: "decrementAtIndex",
-            },
-            ARROW_RIGHT: {
-              guard: "isHorizontal",
-              actions: "incrementAtIndex",
-            },
-            ARROW_UP: {
-              guard: "isVertical",
-              actions: "incrementAtIndex",
-            },
-            ARROW_DOWN: {
-              guard: "isVertical",
-              actions: "decrementAtIndex",
-            },
-            PAGE_UP: {
-              actions: "incrementAtIndex",
-            },
-            PAGE_DOWN: {
-              actions: "decrementAtIndex",
-            },
-            HOME: {
-              actions: "setActiveThumbToMin",
-            },
-            END: {
-              actions: "setActiveThumbToMax",
-            },
-            BLUR: {
-              target: "idle",
-              actions: "clearFocusedIndex",
-            },
-          },
-        },
-        dragging: {
-          entry: "focusActiveThumb",
-          activities: "trackPointerMove",
-          on: {
-            POINTER_UP: {
-              target: "focus",
-              actions: "invokeOnChangeEnd",
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue",
-            },
-          },
-        },
-      },
-    },
-    {
-      guards: {
-        isHorizontal: (ctx) => ctx.isHorizontal,
-        isVertical: (ctx) => ctx.isVertical,
-        hasIndex: (_ctx, evt) => evt.index != null,
-      },
-      activities: {
-        trackFormControlState(ctx, _evt, { initialContext }) {
-          return trackFormControl(dom.getRootEl(ctx), {
-            onFieldsetDisabledChange(disabled) {
-              ctx.fieldsetDisabled = disabled
-            },
-            onFormReset() {
-              set.value(ctx, initialContext.value)
-            },
-          })
-        },
-
-        trackPointerMove(ctx, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx), {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point })
-            },
-            onPointerUp() {
-              send("POINTER_UP")
-            },
-          })
-        },
-        trackThumbsSize(ctx) {
-          if (ctx.thumbAlignment !== "contain" || ctx.thumbSize) return
-
-          return trackElementsSize({
-            getNodes: () => dom.getElements(ctx),
-            observeMutation: true,
-            callback(size) {
-              if (!size || isEqualSize(ctx.thumbSize, size)) return
-              ctx.thumbSize = size
-            },
-          })
-        },
-      },
-      actions: {
-        syncInputElements(ctx) {
-          ctx.value.forEach((value, index) => {
-            const inputEl = dom.getHiddenInputEl(ctx, index)
-            dom.setValue(inputEl, value)
-          })
-        },
-        invokeOnChangeStart(ctx) {
-          ctx.onValueChangeStart?.({ value: ctx.value })
-        },
-        invokeOnChangeEnd(ctx) {
-          ctx.onValueChangeEnd?.({ value: ctx.value })
-        },
-        setClosestThumbIndex(ctx, evt) {
-          const pointValue = dom.getValueFromPoint(ctx, evt.point)
-          if (pointValue == null) return
-
-          const focusedIndex = getClosestIndex(ctx, pointValue)
-          set.focusedIndex(ctx, focusedIndex)
-        },
-        setFocusedIndex(ctx, evt) {
-          set.focusedIndex(ctx, evt.index)
-        },
-        clearFocusedIndex(ctx) {
-          set.focusedIndex(ctx, -1)
-        },
-        setPointerValue(ctx, evt) {
-          const pointerValue = dom.getValueFromPoint(ctx, evt.point)
-          if (pointerValue == null) return
-
-          const value = constrainValue(ctx, pointerValue, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, value)
-        },
-        focusActiveThumb(ctx) {
-          raf(() => {
-            const thumbEl = dom.getThumbEl(ctx, ctx.focusedIndex)
-            thumbEl?.focus({ preventScroll: true })
-          })
-        },
-        decrementAtIndex(ctx, evt) {
-          const value = decrement(ctx, evt.index, evt.step)
-          set.value(ctx, value)
-        },
-        incrementAtIndex(ctx, evt) {
-          const value = increment(ctx, evt.index, evt.step)
-          set.value(ctx, value)
-        },
-        setActiveThumbToMin(ctx) {
-          const { min } = getRangeAtIndex(ctx, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, min)
-        },
-        setActiveThumbToMax(ctx) {
-          const { max } = getRangeAtIndex(ctx, ctx.focusedIndex)
-          set.valueAtIndex(ctx, ctx.focusedIndex, max)
-        },
-        coarseValue(ctx) {
-          const value = normalizeValues(ctx, ctx.value)
-          set.value(ctx, value)
-        },
-        setValueAtIndex(ctx, evt) {
-          const value = constrainValue(ctx, evt.value, evt.index)
-          set.valueAtIndex(ctx, evt.index, value)
-        },
-        setValue(ctx, evt) {
-          const value = normalizeValues(ctx, evt.value)
-          set.value(ctx, value)
-        },
-      },
-    },
-  )
-}
-
-const invoke = {
-  change: (ctx: MachineContext) => {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-    })
-    dom.dispatchChangeEvent(ctx)
-  },
-  focusChange: (ctx: MachineContext) => {
-    ctx.onFocusChange?.({
-      value: Array.from(ctx.value),
-      focusedIndex: ctx.focusedIndex,
-    })
-  },
-}
-
-const set = {
-  valueAtIndex: (ctx: MachineContext, index: number, value: number) => {
-    if (isEqual(ctx.value[index], value)) return
-    ctx.value[index] = value
-    invoke.change(ctx)
-  },
-  value: (ctx: MachineContext, value: number[]) => {
-    if (isEqual(ctx.value, value)) return
-    assignArray(ctx.value, value)
-    invoke.change(ctx)
-  },
-  focusedIndex: (ctx: MachineContext, index: number) => {
-    if (isEqual(ctx.focusedIndex, index)) return
-    ctx.focusedIndex = index
-    invoke.focusChange(ctx)
-  },
-}
diff --git a/packages/machines/range-slider/src/range-slider.style.ts b/packages/machines/range-slider/src/range-slider.style.ts
deleted file mode 100644
index efc9a1ec36..0000000000
--- a/packages/machines/range-slider/src/range-slider.style.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { unstable__dom as sliderDom } from "@zag-js/slider"
-import type { Style } from "@zag-js/types"
-import type { MachineContext as Ctx } from "./range-slider.types"
-
-/* -----------------------------------------------------------------------------
- * Range style calculations
- * -----------------------------------------------------------------------------*/
-
-function getBounds<T>(value: T[]): [T, T] {
-  const firstValue = value[0]
-  const lastThumb = value[value.length - 1]
-  return [firstValue, lastThumb]
-}
-
-export function getRangeOffsets(ctx: Ctx) {
-  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent)
-  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` }
-}
-
-/* -----------------------------------------------------------------------------
- * Thumb style calculations
- * -----------------------------------------------------------------------------*/
-
-function getVisibility(ctx: Ctx) {
-  let visibility: "visible" | "hidden" = "visible"
-  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
-    visibility = "hidden"
-  }
-  return visibility
-}
-
-function getThumbStyle(ctx: Ctx, index: number): Style {
-  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart"
-  return {
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    transform: "var(--slider-thumb-transform)",
-    [placementProp]: `var(--slider-thumb-offset-${index})`,
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Root style calculations
- * -----------------------------------------------------------------------------*/
-
-function getRootStyle(ctx: Ctx): Style {
-  const range = getRangeOffsets(ctx)
-
-  const offsetStyles = ctx.value.reduce<Style>((styles, value, index) => {
-    const offset = sliderDom.getThumbOffset({ ...ctx, value })
-    return { ...styles, [`--slider-thumb-offset-${index}`]: offset }
-  }, {})
-
-  return {
-    ...offsetStyles,
-    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-range-start": range.start,
-    "--slider-range-end": range.end,
-  }
-}
-
-export const styleGetterFns = {
-  getRootStyle,
-  getControlStyle: sliderDom.getControlStyle,
-  getThumbStyle,
-  getRangeStyle: sliderDom.getRangeStyle,
-  getMarkerStyle: sliderDom.getMarkerStyle,
-  getMarkerGroupStyle: sliderDom.getMarkerGroupStyle,
-}
diff --git a/packages/machines/range-slider/src/range-slider.types.ts b/packages/machines/range-slider/src/range-slider.types.ts
deleted file mode 100644
index 7b27201ba4..0000000000
--- a/packages/machines/range-slider/src/range-slider.types.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
-
-/* -----------------------------------------------------------------------------
- * Callback details
- * -----------------------------------------------------------------------------*/
-
-export interface ValueChangeDetails {
-  value: number[]
-}
-
-export interface FocusChangeDetails {
-  focusedIndex: number
-  value: number[]
-}
-
-/* -----------------------------------------------------------------------------
- * Machine context
- * -----------------------------------------------------------------------------*/
-
-type ElementIds = Partial<{
-  root: string
-  thumb(index: number): string
-  control: string
-  track: string
-  range: string
-  label: string
-  output: string
-  marker(index: number): string
-}>
-
-interface PublicContext extends DirectionProperty, CommonProperties {
-  /**
-   * The ids of the elements in the range slider. Useful for composition.
-   */
-  ids?: ElementIds
-  /**
-   * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
-   */
-  "aria-label"?: string[]
-  /**
-   * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
-   */
-  "aria-labelledby"?: string[]
-  /**
-   * The name associated with each slider thumb (when used in a form)
-   */
-  name?: string
-  /**
-   * The associate form of the underlying input element.
-   */
-  form?: string
-  /**
-   * The value of the range slider
-   */
-  value: number[]
-  /**
-   * Whether the slider is disabled
-   */
-  disabled?: boolean
-  /**
-   * Whether the slider is read-only
-   */
-  readOnly?: boolean
-  /**
-   * Whether the slider is invalid
-   */
-  invalid?: boolean
-  /**
-   * Function invoked when the value of the slider changes
-   */
-  onValueChange?(details: ValueChangeDetails): void
-  /**
-   * Function invoked when the slider value change is started
-   */
-  onValueChangeStart?(details: ValueChangeDetails): void
-  /**
-   * Function invoked when the slider value change is done
-   */
-  onValueChangeEnd?(details: ValueChangeDetails): void
-  /**
-   * Function invoked when the slider's focused index changes
-   */
-  onFocusChange?(details: FocusChangeDetails): void
-  /**
-   * Function that returns a human readable value for the slider thumb
-   */
-  getAriaValueText?(value: number, index: number): string
-  /**
-   * 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 minimum permitted steps between multiple thumbs.
-   */
-  minStepsBetweenThumbs: number
-  /**
-   * The orientation of the slider
-   */
-  orientation: "vertical" | "horizontal"
-  /**
-   * 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"
-  /**
-   * The slider thumbs dimensions
-   */
-  thumbSize: { width: number; height: number } | null
-}
-
-export type UserDefinedContext = RequiredBy<PublicContext, "id">
-
-type ComputedContext = Readonly<{
-  /**
-   * @computed
-   * Whether the slider thumb has been measured
-   */
-  hasMeasuredThumbSize: boolean
-  /**
-   * @computed
-   * Whether the slider is interactive
-   */
-  isInteractive: boolean
-  /**
-   * @computed
-   * The raw value of the space between each thumb
-   */
-  spacing: number
-  /**
-   * @computed
-   * Whether the slider is vertical
-   */
-  isVertical: boolean
-  /**
-   * @computed
-   * Whether the slider is horizontal
-   */
-  isHorizontal: boolean
-  /**
-   * @computed
-   * Whether the slider is in RTL mode
-   */
-  isRtl: boolean
-  /**
-   * @computed
-   * The percentage of the slider value relative to the slider min/max
-   */
-  valuePercent: number[]
-  /**
-   * @computed
-   * Whether the slider is disabled
-   */
-  isDisabled: boolean
-}>
-
-type PrivateContext = Context<{
-  /**
-   * @internal
-   * The active index of the range slider. This represents
-   * the currently dragged/focused thumb.
-   */
-  focusedIndex: number
-  /**
-   * @internal
-   * The move threshold of the slider thumb before it is considered to be moved
-   */
-  threshold: number
-  /**
-   * @internal
-   * Whether the slider fieldset is disabled
-   */
-  fieldsetDisabled: boolean
-}>
-
-export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
-
-export interface MachineState {
-  value: "idle" | "dragging" | "focus"
-}
-
-export type State = S.State<MachineContext, MachineState>
-
-export type Send = S.Send<S.AnyEventObject>
-
-/* -----------------------------------------------------------------------------
- * Component API
- * -----------------------------------------------------------------------------*/
-
-export interface MarkerProps {
-  value: number
-}
-
-export interface MachineApi<T extends PropTypes = PropTypes> {
-  /**
-   * The value of the slider.
-   */
-  value: number[]
-  /**
-   * Whether the slider is being dragged.
-   */
-  isDragging: boolean
-  /**
-   * Whether the slider is focused.
-   */
-  isFocused: boolean
-  /**
-   * Function to set the value of the slider.
-   */
-  setValue(value: number[]): void
-  /**
-   * Returns the value of the thumb at the given index.
-   */
-  getThumbValue(index: number): number
-  /**
-   * Sets the value of the thumb at the given index.
-   */
-  setThumbValue(index: number, value: number): void
-  /**
-   * Returns the percent of the thumb at the given index.
-   */
-  getValuePercent: (value: number) => number
-  /**
-   * Returns the value of the thumb at the given percent.
-   */
-  getPercentValue: (percent: number) => number
-  /**
-   * Returns the percent of the thumb at the given index.
-   */
-  getThumbPercent(index: number): number
-  /**
-   * Sets the percent of the thumb at the given index.
-   */
-  setThumbPercent(index: number, percent: number): void
-  /**
-   * Returns the min value of the thumb at the given index.
-   */
-  getThumbMin(index: number): number
-  /**
-   * Returns the max value of the thumb at the given index.
-   */
-  getThumbMax(index: number): number
-  /**
-   * Function to increment the value of the slider at the given index.
-   */
-  increment(index: number): void
-  /**
-   * Function to decrement the value of the slider at the given index.
-   */
-  decrement(index: number): void
-  /**
-   * Function to focus the slider. This focuses the first thumb.
-   */
-  focus(): void
-  labelProps: T["label"]
-  rootProps: T["element"]
-  outputProps: T["output"]
-  trackProps: T["element"]
-  getThumbProps(index: number): T["element"]
-  getHiddenInputProps(index: number): T["input"]
-  rangeProps: T["element"]
-  controlProps: T["element"]
-  markerGroupProps: T["element"]
-  getMarkerProps(props: MarkerProps): T["element"]
-}
diff --git a/packages/machines/range-slider/src/range-slider.utils.ts b/packages/machines/range-slider/src/range-slider.utils.ts
deleted file mode 100644
index 723de0ff4f..0000000000
--- a/packages/machines/range-slider/src/range-slider.utils.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  clampValue,
-  getClosestValueIndex,
-  getNextStepValue,
-  getPreviousStepValue,
-  getValueRanges,
-  snapValueToStep,
-} from "@zag-js/numeric-range"
-import type { MachineContext as Ctx } from "./range-slider.types"
-
-export function normalizeValues(ctx: Ctx, nextValues: number[]) {
-  return nextValues.map((value, index, values) => {
-    return constrainValue({ ...ctx, value: values }, value, index)
-  })
-}
-
-export function clampPercent(percent: number) {
-  return clampValue(percent, 0, 1)
-}
-
-export function getRangeAtIndex(ctx: Ctx, index: number) {
-  return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index]
-}
-
-export function constrainValue(ctx: Ctx, value: number, index: number) {
-  const range = getRangeAtIndex(ctx, index)
-  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step)
-  return clampValue(snapValue, range.min, range.max)
-}
-
-export function decrement(ctx: Ctx, index?: number, step?: number) {
-  const idx = index ?? ctx.focusedIndex
-  const range = getRangeAtIndex(ctx, idx)
-  const nextValues = getPreviousStepValue(idx, {
-    ...range,
-    step: step ?? ctx.step,
-    values: ctx.value,
-  })
-  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max)
-  return nextValues
-}
-
-export function increment(ctx: Ctx, index?: number, step?: number) {
-  const idx = index ?? ctx.focusedIndex
-  const range = getRangeAtIndex(ctx, idx)
-  const nextValues = getNextStepValue(idx, {
-    ...range,
-    step: step ?? ctx.step,
-    values: ctx.value,
-  })
-  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max)
-  return nextValues
-}
-
-export function getClosestIndex(ctx: Ctx, pointValue: number) {
-  return getClosestValueIndex(ctx.value, pointValue)
-}
-
-export function assignArray(current: number[], next: number[]) {
-  for (let i = 0; i < next.length; i++) {
-    const value = next[i]
-    current[i] = value
-  }
-}
diff --git a/packages/machines/range-slider/tsconfig.json b/packages/machines/range-slider/tsconfig.json
deleted file mode 100644
index 8e781cd154..0000000000
--- a/packages/machines/range-slider/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
-  }
-}
diff --git a/packages/machines/slider/CHANGELOG.md b/packages/machines/slider/CHANGELOG.md
index 5aad577685..10e79581f8 100644
--- a/packages/machines/slider/CHANGELOG.md
+++ b/packages/machines/slider/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.24.0
   - @zag-js/core@0.24.0
+  - @zag-js/slider@0.24.0
   - @zag-js/types@0.24.0
   - @zag-js/utils@0.24.0
   - @zag-js/dom-event@0.24.0
@@ -22,6 +23,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.23.0
   - @zag-js/core@0.23.0
+  - @zag-js/slider@0.23.0
   - @zag-js/types@0.23.0
   - @zag-js/utils@0.23.0
   - @zag-js/dom-event@0.23.0
@@ -37,7 +39,8 @@
 - [`25095948`](https://github.com/chakra-ui/zag/commit/25095948d25c0d5e8d3088de939eacc9961dbfe4) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Ensure `dir` context property is reflected in parts
 
-- Updated dependencies []:
+- Updated dependencies [[`25095948`](https://github.com/chakra-ui/zag/commit/25095948d25c0d5e8d3088de939eacc9961dbfe4)]:
+  - @zag-js/slider@0.22.0
   - @zag-js/anatomy@0.22.0
   - @zag-js/core@0.22.0
   - @zag-js/types@0.22.0
@@ -55,6 +58,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.21.0
   - @zag-js/core@0.21.0
+  - @zag-js/slider@0.21.0
   - @zag-js/types@0.21.0
   - @zag-js/utils@0.21.0
   - @zag-js/dom-event@0.21.0
@@ -81,8 +85,10 @@
 - [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Remove toggle machine
 
-- Updated dependencies [[`9a3a82f0`](https://github.com/chakra-ui/zag/commit/9a3a82f0b3738beda59c313fafd51360e6b0322f),
+- Updated dependencies [[`be90c039`](https://github.com/chakra-ui/zag/commit/be90c039891ba943e735b701f71c2bf4ca3c43cd),
+  [`9a3a82f0`](https://github.com/chakra-ui/zag/commit/9a3a82f0b3738beda59c313fafd51360e6b0322f),
   [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85)]:
+  - @zag-js/slider@0.20.0
   - @zag-js/types@0.20.0
   - @zag-js/anatomy@0.20.0
   - @zag-js/core@0.20.0
@@ -103,6 +109,7 @@
 
 - Updated dependencies [[`f5dff3f4`](https://github.com/chakra-ui/zag/commit/f5dff3f4e1a13d5315d3bcfcc1295952b46e4016),
   [`3f0b6a19`](https://github.com/chakra-ui/zag/commit/3f0b6a19dcf9779846efb2bc093235299301bbdb)]:
+  - @zag-js/slider@0.19.1
   - @zag-js/utils@0.19.1
   - @zag-js/core@0.19.1
   - @zag-js/anatomy@0.19.1
@@ -119,6 +126,7 @@
 
 - Updated dependencies [[`4c578aab`](https://github.com/chakra-ui/zag/commit/4c578aab2d330405077bb790e884f968b6b5703f)]:
   - @zag-js/form-utils@0.19.0
+  - @zag-js/slider@0.19.0
   - @zag-js/anatomy@0.19.0
   - @zag-js/core@0.19.0
   - @zag-js/types@0.19.0
@@ -135,6 +143,7 @@
 - Updated dependencies [[`224cbbb0`](https://github.com/chakra-ui/zag/commit/224cbbb02eef713d81acbee627dd9a0ed745c7fa)]:
   - @zag-js/utils@0.18.0
   - @zag-js/core@0.18.0
+  - @zag-js/slider@0.18.0
   - @zag-js/anatomy@0.18.0
   - @zag-js/types@0.18.0
   - @zag-js/dom-event@0.18.0
@@ -163,8 +172,10 @@
   [`82d1ab7b`](https://github.com/chakra-ui/zag/commit/82d1ab7b61d75fa6d7678e60af53b84c5d93e74b) Thanks
   [@srflp](https://github.com/srflp)! - Re-enable the input after removing `disabled` attribute from the parent fieldset
 
-- Updated dependencies [[`82d1ab7b`](https://github.com/chakra-ui/zag/commit/82d1ab7b61d75fa6d7678e60af53b84c5d93e74b),
+- Updated dependencies [[`a1a585d6`](https://github.com/chakra-ui/zag/commit/a1a585d6d2dbac5836a847a39faf7d68db354188),
+  [`82d1ab7b`](https://github.com/chakra-ui/zag/commit/82d1ab7b61d75fa6d7678e60af53b84c5d93e74b),
   [`db81eaab`](https://github.com/chakra-ui/zag/commit/db81eaab8c8b06d74cf81d46fa145f4b480b7e82)]:
+  - @zag-js/slider@0.17.0
   - @zag-js/form-utils@0.17.0
   - @zag-js/dom-query@0.17.0
   - @zag-js/dom-event@0.17.0
@@ -182,6 +193,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.16.0
   - @zag-js/core@0.16.0
+  - @zag-js/slider@0.16.0
   - @zag-js/types@0.16.0
   - @zag-js/utils@0.16.0
   - @zag-js/dom-event@0.16.0
@@ -199,7 +211,8 @@
 
 ### Patch Changes
 
-- Updated dependencies []:
+- Updated dependencies [[`4be63ee4`](https://github.com/chakra-ui/zag/commit/4be63ee426b33944ab6a093772536c5aaed78f3e)]:
+  - @zag-js/slider@0.15.0
   - @zag-js/anatomy@0.15.0
   - @zag-js/core@0.15.0
   - @zag-js/types@0.15.0
@@ -222,6 +235,7 @@
 
 - Updated dependencies [[`7cf380b0`](https://github.com/chakra-ui/zag/commit/7cf380b0d3019507181b79e0fe99e894d9e83030)]:
   - @zag-js/dom-query@0.14.0
+  - @zag-js/slider@0.14.0
   - @zag-js/dom-event@0.14.0
   - @zag-js/anatomy@0.14.0
   - @zag-js/core@0.14.0
@@ -235,8 +249,13 @@
 
 ### Patch Changes
 
+- [`91502f27`](https://github.com/chakra-ui/zag/commit/91502f27b8639bf357564cf5cce37367c717115a) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where `minStepsBetweenThumbs` isn't respected when using
+  keyboard
+
 - Updated dependencies [[`4a2d8b77`](https://github.com/chakra-ui/zag/commit/4a2d8b77d1e71ad6b6c10134bc4186db6e6c0414)]:
   - @zag-js/core@0.13.0
+  - @zag-js/slider@0.13.0
   - @zag-js/anatomy@0.13.0
   - @zag-js/types@0.13.0
   - @zag-js/utils@0.13.0
@@ -253,6 +272,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.12.0
   - @zag-js/core@0.12.0
+  - @zag-js/slider@0.12.0
   - @zag-js/types@0.12.0
   - @zag-js/utils@0.12.0
   - @zag-js/dom-event@0.12.0
@@ -268,6 +288,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.11.2
   - @zag-js/core@0.11.2
+  - @zag-js/slider@0.11.2
   - @zag-js/types@0.11.2
   - @zag-js/utils@0.11.2
   - @zag-js/dom-event@0.11.2
@@ -283,6 +304,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.11.1
   - @zag-js/core@0.11.1
+  - @zag-js/slider@0.11.1
   - @zag-js/types@0.11.1
   - @zag-js/utils@0.11.1
   - @zag-js/dom-event@0.11.1
@@ -304,6 +326,7 @@
   - @zag-js/form-utils@0.11.0
   - @zag-js/dom-event@0.11.0
   - @zag-js/dom-query@0.11.0
+  - @zag-js/slider@0.11.0
   - @zag-js/utils@0.11.0
   - @zag-js/anatomy@0.11.0
   - @zag-js/types@0.11.0
@@ -316,6 +339,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.10.5
   - @zag-js/core@0.10.5
+  - @zag-js/slider@0.10.5
   - @zag-js/types@0.10.5
   - @zag-js/utils@0.10.5
   - @zag-js/dom-event@0.10.5
@@ -331,6 +355,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.10.4
   - @zag-js/core@0.10.4
+  - @zag-js/slider@0.10.4
   - @zag-js/types@0.10.4
   - @zag-js/utils@0.10.4
   - @zag-js/dom-event@0.10.4
@@ -350,6 +375,7 @@
   [`775f11c9`](https://github.com/chakra-ui/zag/commit/775f11c96759197fcbad14b5b8a0fbde095efc55)]:
   - @zag-js/anatomy@0.10.3
   - @zag-js/core@0.10.3
+  - @zag-js/slider@0.10.3
   - @zag-js/types@0.10.3
   - @zag-js/utils@0.10.3
   - @zag-js/dom-event@0.10.3
@@ -365,6 +391,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.10.2
   - @zag-js/core@0.10.2
+  - @zag-js/slider@0.10.2
   - @zag-js/types@0.10.2
   - @zag-js/utils@0.10.2
   - @zag-js/dom-event@0.10.2
@@ -380,6 +407,7 @@
 - Updated dependencies []:
   - @zag-js/anatomy@0.10.1
   - @zag-js/core@0.10.1
+  - @zag-js/slider@0.10.1
   - @zag-js/types@0.10.1
   - @zag-js/utils@0.10.1
   - @zag-js/dom-event@0.10.1
@@ -401,6 +429,7 @@
   [`2a1fb4a0`](https://github.com/chakra-ui/zag/commit/2a1fb4a0740e6ad8e2902265e14597f087007675),
   [`a30258e8`](https://github.com/chakra-ui/zag/commit/a30258e8137bfba5811471919e463b79039848b6)]:
   - @zag-js/dom-event@0.10.0
+  - @zag-js/slider@0.10.0
   - @zag-js/dom-query@0.10.0
   - @zag-js/anatomy@0.10.0
   - @zag-js/types@0.10.0
@@ -420,6 +449,7 @@
 
 - Updated dependencies [[`280015e3`](https://github.com/chakra-ui/zag/commit/280015e36539f23731cba09a28e1371d5760b8b4)]:
   - @zag-js/dom-event@0.9.2
+  - @zag-js/slider@0.9.2
   - @zag-js/anatomy@0.9.2
   - @zag-js/core@0.9.2
   - @zag-js/types@0.9.2
@@ -439,6 +469,7 @@
 - Updated dependencies [[`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f)]:
   - @zag-js/anatomy@0.9.1
   - @zag-js/core@0.9.1
+  - @zag-js/slider@0.9.1
   - @zag-js/types@0.9.1
   - @zag-js/utils@0.9.1
   - @zag-js/dom-event@0.9.1
@@ -453,6 +484,7 @@
 
 - Updated dependencies [[`6274ed5e`](https://github.com/chakra-ui/zag/commit/6274ed5e460400ef7038d2b3b6c1f0ce679ca649)]:
   - @zag-js/anatomy@0.9.0
+  - @zag-js/slider@0.9.0
 
 ## 0.8.0
 
@@ -460,6 +492,7 @@
 
 - Updated dependencies []:
   - @zag-js/dom-event@0.8.0
+  - @zag-js/slider@0.8.0
 
 ## 0.7.0
 
@@ -473,7 +506,10 @@
   [@segunadebayo](https://github.com/segunadebayo)! - Ensure ids of underlying elements can customized based on `ids`
   context property.
 
-- Updated dependencies [[`413cdf18`](https://github.com/chakra-ui/zag/commit/413cdf180f718469c9c8b879a43aa4501d1ae59c)]:
+- Updated dependencies [[`f2a1918f`](https://github.com/chakra-ui/zag/commit/f2a1918f994f252e4ac81bc6a801e7094874968a),
+  [`413cdf18`](https://github.com/chakra-ui/zag/commit/413cdf180f718469c9c8b879a43aa4501d1ae59c),
+  [`d3c11c51`](https://github.com/chakra-ui/zag/commit/d3c11c510dedda6d86159ed7e5736d9e7083c028)]:
+  - @zag-js/slider@0.7.0
   - @zag-js/core@0.7.0
 
 ## 0.6.0
@@ -482,6 +518,7 @@
 
 - Updated dependencies [[`657df96e`](https://github.com/chakra-ui/zag/commit/657df96e0fbc59dcab8d06eb90105519d32b527f)]:
   - @zag-js/dom-event@0.6.0
+  - @zag-js/slider@0.6.0
 
 ## 0.5.0
 
@@ -491,6 +528,7 @@
   [`54377b1c`](https://github.com/chakra-ui/zag/commit/54377b1c4ed85deb06453a00648b7c2c1f0c72df)]:
   - @zag-js/core@0.5.0
   - @zag-js/types@0.5.0
+  - @zag-js/slider@0.5.0
   - @zag-js/dom-event@0.5.0
 
 ## 0.2.17
@@ -500,6 +538,7 @@
 - Updated dependencies [[`30dbeb28`](https://github.com/chakra-ui/zag/commit/30dbeb282f7901c33518097a0e1dd9a857f7efb0)]:
   - @zag-js/utils@0.3.4
   - @zag-js/core@0.2.12
+  - @zag-js/slider@0.2.17
 
 ## 0.2.16
 
@@ -507,6 +546,7 @@
 
 - Updated dependencies [[`1e10b1f4`](https://github.com/chakra-ui/zag/commit/1e10b1f40016f5c9bdf0924a3470b9383c0dbce2)]:
   - @zag-js/core@0.2.11
+  - @zag-js/slider@0.2.16
 
 ## 0.2.15
 
@@ -514,6 +554,7 @@
 
 - Updated dependencies [[`1446d88b`](https://github.com/chakra-ui/zag/commit/1446d88bff3848f2a2ec0a793ee83281cda966e8)]:
   - @zag-js/dom-query@0.1.4
+  - @zag-js/slider@0.2.15
 
 ## 0.2.14
 
@@ -528,6 +569,7 @@
   - @zag-js/form-utils@0.2.5
   - @zag-js/dom-event@0.0.1
   - @zag-js/dom-query@0.1.3
+  - @zag-js/slider@0.2.14
   - @zag-js/core@0.2.10
 
 ## 0.2.13
@@ -536,6 +578,7 @@
 
 - Updated dependencies [[`df27f257`](https://github.com/chakra-ui/zag/commit/df27f257f53d194013b528342d3d9aef994d0d5c)]:
   - @zag-js/core@0.2.9
+  - @zag-js/slider@0.2.13
 
 ## 0.2.12
 
@@ -543,6 +586,7 @@
 
 - Updated dependencies []:
   - @zag-js/core@0.2.8
+  - @zag-js/slider@0.2.12
 
 ## 0.2.11
 
@@ -556,8 +600,10 @@
   [`fef822b9`](https://github.com/chakra-ui/zag/commit/fef822b91a4a9dbfc3c1e8f88a89727a3231326a)]:
   - @zag-js/core@0.2.7
   - @zag-js/anatomy@0.1.4
+  - @zag-js/slider@0.2.11
   - @zag-js/types@0.3.4
   - @zag-js/element-size@0.3.2
+  - @zag-js/form-utils@0.2.4
   - @zag-js/numeric-range@0.1.1
 
 ## 0.2.10
@@ -567,8 +613,10 @@
 - [`88ccbbed`](https://github.com/chakra-ui/zag/commit/88ccbbed937acf10d4338e2c6d7f1e6b9eb538c8) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Refactor connect function to avoid re-creating new objects
 
-- Updated dependencies [[`80de0b7c`](https://github.com/chakra-ui/zag/commit/80de0b7c7f888a254a3e1fec2da5338e235bc699)]:
+- Updated dependencies [[`80de0b7c`](https://github.com/chakra-ui/zag/commit/80de0b7c7f888a254a3e1fec2da5338e235bc699),
+  [`88ccbbed`](https://github.com/chakra-ui/zag/commit/88ccbbed937acf10d4338e2c6d7f1e6b9eb538c8)]:
   - @zag-js/core@0.2.6
+  - @zag-js/slider@0.2.10
 
 ## 0.2.9
 
@@ -578,6 +626,9 @@
   [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where `this` type throws a `TypeError` when `api`
   properties are destructured.
 
+- Updated dependencies [[`5f0aef04`](https://github.com/chakra-ui/zag/commit/5f0aef04601bd65ded6b352c8b6695716df8fc3e)]:
+  - @zag-js/slider@0.2.9
+
 ## 0.2.8
 
 ### Patch Changes
@@ -588,25 +639,36 @@
   - Fixed issue where the thumb cannot go back to its original position when `min` is greater than `0`
 - Updated dependencies [[`c1f609df`](https://github.com/chakra-ui/zag/commit/c1f609dfabbc31c296ebdc1e89480313130f832b),
   [`c7e85e20`](https://github.com/chakra-ui/zag/commit/c7e85e20d4d08b56852768becf2fc5f7f4275dcc),
+  [`de1af599`](https://github.com/chakra-ui/zag/commit/de1af599a515d2b0d09ee7c5d92835088ae05201),
   [`de1af599`](https://github.com/chakra-ui/zag/commit/de1af599a515d2b0d09ee7c5d92835088ae05201)]:
   - @zag-js/types@0.3.3
   - @zag-js/core@0.2.5
   - @zag-js/numeric-range@0.1.0
+  - @zag-js/slider@0.2.8
+  - @zag-js/form-utils@0.2.3
 
 ## 0.2.7
 
 ### Patch Changes
 
+- [`eff42501`](https://github.com/chakra-ui/zag/commit/eff42501dd2ec7b243b2d496bca6111a6d78d610) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Add explicit type annotation to anatomy
+
 - [#462](https://github.com/chakra-ui/zag/pull/462)
   [`f8c47a2b`](https://github.com/chakra-ui/zag/commit/f8c47a2b4442bfadc4d98315a8c1ac4aa4020822) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Update packages to use explicit `exports` field in `package.json`
 
+- [#454](https://github.com/chakra-ui/zag/pull/454)
+  [`2a601b7f`](https://github.com/chakra-ui/zag/commit/2a601b7f7b79f554ffd3405fdc52b8b8f3c0ae97) Thanks
+  [@anubra266](https://github.com/anubra266)! - Fix negative values offset calculation
+
 - Updated dependencies [[`4c98f016`](https://github.com/chakra-ui/zag/commit/4c98f016ae3d48b1b74f4dc8c302ef9a1c664260),
   [`ec776276`](https://github.com/chakra-ui/zag/commit/ec77627603f310ca34a659bc250cdcf819a17b91),
   [`f8c47a2b`](https://github.com/chakra-ui/zag/commit/f8c47a2b4442bfadc4d98315a8c1ac4aa4020822),
   [`5799fcb5`](https://github.com/chakra-ui/zag/commit/5799fcb520a7956dc7ef1a9bc7aaa8dff85fa592)]:
   - @zag-js/core@0.2.4
   - @zag-js/anatomy@0.1.3
+  - @zag-js/slider@0.2.7
   - @zag-js/types@0.3.2
   - @zag-js/element-size@0.3.1
 
@@ -616,6 +678,7 @@
 
 - Updated dependencies [[`5bd24f02`](https://github.com/chakra-ui/zag/commit/5bd24f02fcab355f7df8a2d5cea3b155155380f8)]:
   - @zag-js/anatomy@0.1.2
+  - @zag-js/slider@0.2.6
 
 ## 0.2.5
 
@@ -624,13 +687,19 @@
 - [`af4ab9bb`](https://github.com/chakra-ui/zag/commit/af4ab9bb7cd599c53e47ca7ed2ea90a4ff742499) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Update anatomy of components
 
-- Updated dependencies [[`9d936614`](https://github.com/chakra-ui/zag/commit/9d93661439f10a550c154e9f290905d32e8f509b)]:
+- Updated dependencies [[`9d936614`](https://github.com/chakra-ui/zag/commit/9d93661439f10a550c154e9f290905d32e8f509b),
+  [`af4ab9bb`](https://github.com/chakra-ui/zag/commit/af4ab9bb7cd599c53e47ca7ed2ea90a4ff742499)]:
   - @zag-js/core@0.2.3
+  - @zag-js/slider@0.2.5
 
 ## 0.2.4
 
 ### Patch Changes
 
+- [#426](https://github.com/chakra-ui/zag/pull/426)
+  [`dc848b83`](https://github.com/chakra-ui/zag/commit/dc848b83c20767ed87e38490515289a72f4da03b) Thanks
+  [@anubra266](https://github.com/anubra266)! - Change `values` to `value`
+
 - [#416](https://github.com/chakra-ui/zag/pull/416)
   [`5e0e0ff5`](https://github.com/chakra-ui/zag/commit/5e0e0ff57c15c173bbf5f38e4e0dac117b47739b) Thanks
   [@cschroeter](https://github.com/cschroeter)! - Describe the anatomy of a machine and use it to generate data-scope
@@ -638,6 +707,7 @@
 
 - Updated dependencies [[`5e0e0ff5`](https://github.com/chakra-ui/zag/commit/5e0e0ff57c15c173bbf5f38e4e0dac117b47739b)]:
   - @zag-js/anatomy@0.1.1
+  - @zag-js/slider@0.2.4
 
 ## 0.2.3
 
@@ -655,6 +725,11 @@
   [`5706d503`](https://github.com/chakra-ui/zag/commit/5706d5036db101ec7fd6dcb9a9065461aad0225c) Thanks
   [@anubra266](https://github.com/anubra266)! - Refactor machine to simplify form-utils approach
 
+- Updated dependencies [[`29f24231`](https://github.com/chakra-ui/zag/commit/29f242317df9fff2af04b83b618f6577cbdbb713),
+  [`985d9b26`](https://github.com/chakra-ui/zag/commit/985d9b26a9db7e585ff504bbaa88de6835cf3fd0),
+  [`5706d503`](https://github.com/chakra-ui/zag/commit/5706d5036db101ec7fd6dcb9a9065461aad0225c)]:
+  - @zag-js/slider@0.2.3
+
 ## 0.2.2
 
 ### Patch Changes
@@ -665,6 +740,7 @@
   [`65976dd5`](https://github.com/chakra-ui/zag/commit/65976dd51902b1c4a4460cd196467156a705a999)]:
   - @zag-js/core@0.2.2
   - @zag-js/types@0.3.1
+  - @zag-js/slider@0.2.2
 
 ## 0.2.1
 
@@ -674,8 +750,10 @@
   [`21775db5`](https://github.com/chakra-ui/zag/commit/21775db5ac318b095f603e7030ec7645e104f663) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Omit undefined values passed in machine's context
 
-- Updated dependencies [[`4aa6955f`](https://github.com/chakra-ui/zag/commit/4aa6955fab7ff6fee8545dcf491576640c69c64e)]:
+- Updated dependencies [[`4aa6955f`](https://github.com/chakra-ui/zag/commit/4aa6955fab7ff6fee8545dcf491576640c69c64e),
+  [`21775db5`](https://github.com/chakra-ui/zag/commit/21775db5ac318b095f603e7030ec7645e104f663)]:
   - @zag-js/core@0.2.1
+  - @zag-js/slider@0.2.1
 
 ## 0.2.0
 
@@ -690,6 +768,7 @@
 
 - Updated dependencies [[`9cb4e9de`](https://github.com/chakra-ui/zag/commit/9cb4e9de28a3c6666860bc068c86be67a3b1a2ca)]:
   - @zag-js/core@0.2.0
+  - @zag-js/slider@0.2.0
   - @zag-js/types@0.3.0
   - @zag-js/element-size@0.3.0
 
@@ -702,6 +781,7 @@
 
 - Updated dependencies [[`52552156`](https://github.com/chakra-ui/zag/commit/52552156ded1b00f873576f52b11d0414f5dfee7)]:
   - @zag-js/core@0.1.12
+  - @zag-js/slider@0.1.16
   - @zag-js/types@0.2.7
   - @zag-js/element-size@0.2.3
 
@@ -716,6 +796,7 @@
 - Updated dependencies [[`61c11646`](https://github.com/chakra-ui/zag/commit/61c116467c1758bdda7efe1f27d4ed26e7d44624),
   [`c0cc303e`](https://github.com/chakra-ui/zag/commit/c0cc303e9824ea395c06d9faa699d23e19ef6538)]:
   - @zag-js/core@0.1.11
+  - @zag-js/slider@0.1.15
   - @zag-js/types@0.2.6
   - @zag-js/element-size@0.2.2
 
@@ -729,6 +810,7 @@
 - Updated dependencies [[`ce97956c`](https://github.com/chakra-ui/zag/commit/ce97956c0586ce842f7b082dd71cc6d68909ad58),
   [`55e6a55c`](https://github.com/chakra-ui/zag/commit/55e6a55c37a60eea5caa446270cd1f6012d7363d)]:
   - @zag-js/core@0.1.10
+  - @zag-js/slider@0.1.14
   - @zag-js/types@0.2.5
   - @zag-js/element-size@0.2.1
 
@@ -738,10 +820,12 @@
 
 - [#261](https://github.com/chakra-ui/zag/pull/261)
   [`16cf349c`](https://github.com/chakra-ui/zag/commit/16cf349c76271329f97fe81b81cde5914fddda2e) Thanks
-  [@segunadebayo](https://github.com/segunadebayo)! - Add support for observing slider thumb size
-
-- Updated dependencies [[`d81885dc`](https://github.com/chakra-ui/zag/commit/d81885dc1b4e8674d7be0801ee3ab8a55e3ffeb5),
+  [@segunadebayo](https://github.com/segunadebayo)! - - Add support for observing size of slider thumbs
+  - Add support for dynamic sliders
+- Updated dependencies [[`16cf349c`](https://github.com/chakra-ui/zag/commit/16cf349c76271329f97fe81b81cde5914fddda2e),
+  [`d81885dc`](https://github.com/chakra-ui/zag/commit/d81885dc1b4e8674d7be0801ee3ab8a55e3ffeb5),
   [`1d30333e`](https://github.com/chakra-ui/zag/commit/1d30333e0d3011707950adab26878cde9ed1c242)]:
+  - @zag-js/slider@0.1.13
   - @zag-js/element-size@0.2.0
   - @zag-js/types@0.2.4
 
@@ -753,6 +837,9 @@
   [`b3c768cd`](https://github.com/chakra-ui/zag/commit/b3c768cd8605c8964acc966d29075e1f845ee0ff) Thanks
   [@anubra266](https://github.com/anubra266)! - Refactor form utilitities into new package
 
+- Updated dependencies [[`b3c768cd`](https://github.com/chakra-ui/zag/commit/b3c768cd8605c8964acc966d29075e1f845ee0ff)]:
+  - @zag-js/slider@0.1.12
+
 ## 0.1.11
 
 ### Patch Changes
@@ -762,6 +849,7 @@
 
 - Updated dependencies [[`2a2566b8`](https://github.com/chakra-ui/zag/commit/2a2566b8be1441ae98215bec594e4c996f3b8aaf)]:
   - @zag-js/core@0.1.9
+  - @zag-js/slider@0.1.11
   - @zag-js/types@0.2.3
 
 ## 0.1.10
@@ -778,8 +866,11 @@
 
 * Updated dependencies [[`0e750fa1`](https://github.com/chakra-ui/zag/commit/0e750fa1e8d17f495f7d9fda10385819ac762c7b),
   [`66cb9c99`](https://github.com/chakra-ui/zag/commit/66cb9c998662fd049590d51cfdcd79f03e2f582b),
-  [`c5872be2`](https://github.com/chakra-ui/zag/commit/c5872be2fe057675fb8c7c64ed2c10b99daf697e)]:
+  [`ef8a7386`](https://github.com/chakra-ui/zag/commit/ef8a7386ccf4de3431c785b310670da105788597),
+  [`c5872be2`](https://github.com/chakra-ui/zag/commit/c5872be2fe057675fb8c7c64ed2c10b99daf697e),
+  [`66cb9c99`](https://github.com/chakra-ui/zag/commit/66cb9c998662fd049590d51cfdcd79f03e2f582b)]:
   - @zag-js/types@0.2.2
+  - @zag-js/slider@0.1.10
   - @zag-js/core@0.1.8
 
 ## 0.1.9
@@ -814,18 +905,24 @@
   ```
 
 * [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Bump versions
+
+- [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Fix issue where pointer position is incorrent when wrapped in
   non-static parent
 
-* Updated dependencies [[`1abed11b`](https://github.com/chakra-ui/zag/commit/1abed11bda7fc56fd3f77c3b842e89a934ee3253),
+- Updated dependencies [[`1abed11b`](https://github.com/chakra-ui/zag/commit/1abed11bda7fc56fd3f77c3b842e89a934ee3253),
   [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4),
   [`86155fc0`](https://github.com/chakra-ui/zag/commit/86155fc039cc90fc05c9ce024f8c799e03fde11d),
   [`664e61f9`](https://github.com/chakra-ui/zag/commit/664e61f94844f0405b7e646e4a30b8f0f737f21c),
   [`3a53a1e9`](https://github.com/chakra-ui/zag/commit/3a53a1e97306a9fedf1706b95f8e38b03750c2f3),
-  [`b91a3a5c`](https://github.com/chakra-ui/zag/commit/b91a3a5cb56f4e25c46fdfcf8ff0fe0a41d75e66)]:
+  [`b91a3a5c`](https://github.com/chakra-ui/zag/commit/b91a3a5cb56f4e25c46fdfcf8ff0fe0a41d75e66),
+  [`ef0c29cf`](https://github.com/chakra-ui/zag/commit/ef0c29cfa874f2fc990872f319affae023bb7cd4)]:
   - @zag-js/core@0.1.7
+  - @zag-js/slider@0.1.9
   - @zag-js/types@0.2.1
   - @zag-js/dom-utils@0.1.6
+  - @zag-js/rect-utils@0.1.3
 
 ## 0.1.8
 
@@ -849,8 +946,13 @@
   - `center`: the thumb will extend beyond the bounds of the slider track.
   - `contain`: the thumb will be contained within the bounds of the track.
 
-* Updated dependencies [[`01a4a520`](https://github.com/chakra-ui/zag/commit/01a4a520abdc2ec88b205acee6d1b25265d5fd3f),
-  [`0d2911af`](https://github.com/chakra-ui/zag/commit/0d2911af381bacc9151845e5312f62a5aa2999b2)]:
+* Updated dependencies [[`d31abf77`](https://github.com/chakra-ui/zag/commit/d31abf770c0a718a5cd2a81dec6aea256b762185),
+  [`8f27a2af`](https://github.com/chakra-ui/zag/commit/8f27a2af2fd9d976178fdd2b78e925bf11ad9458),
+  [`cc8c7ad9`](https://github.com/chakra-ui/zag/commit/cc8c7ad9c3c5a5b4d4cde114a666eab0685b0d34),
+  [`01a4a520`](https://github.com/chakra-ui/zag/commit/01a4a520abdc2ec88b205acee6d1b25265d5fd3f),
+  [`0d2911af`](https://github.com/chakra-ui/zag/commit/0d2911af381bacc9151845e5312f62a5aa2999b2),
+  [`49b666ad`](https://github.com/chakra-ui/zag/commit/49b666ad40b3a91057a9f8935c34a7edc5cc6b59)]:
+  - @zag-js/slider@0.1.8
   - @zag-js/dom-utils@0.1.5
   - @zag-js/types@0.2.0
 
@@ -861,11 +963,13 @@
 - [`dfae8e35`](https://github.com/chakra-ui/zag/commit/dfae8e351f1851d91a2d5508bd1a875be180c73d) Thanks
   [@segunadebayo](https://github.com/segunadebayo)! - Cleanup types
 
-- Updated dependencies [[`f0fb09f9`](https://github.com/chakra-ui/zag/commit/f0fb09f9bfa6a7919d078c66cf14930acab6bdfd),
+- Updated dependencies [[`dfae8e35`](https://github.com/chakra-ui/zag/commit/dfae8e351f1851d91a2d5508bd1a875be180c73d),
+  [`f0fb09f9`](https://github.com/chakra-ui/zag/commit/f0fb09f9bfa6a7919d078c66cf14930acab6bdfd),
   [`5982d826`](https://github.com/chakra-ui/zag/commit/5982d826126a7b83252fcd0b0479079fccb62189),
   [`e2f62c7a`](https://github.com/chakra-ui/zag/commit/e2f62c7a30266e7e2c8b1b10b55a22fb979199ed),
   [`ef2872d7`](https://github.com/chakra-ui/zag/commit/ef2872d7b291fa39c6b6293ae12f522d811a2190),
   [`63c1e3a9`](https://github.com/chakra-ui/zag/commit/63c1e3a996832ccf55e9a3cc1015d05b6ba927e2)]:
+  - @zag-js/slider@0.1.7
   - @zag-js/dom-utils@0.1.4
   - @zag-js/core@0.1.6
   - @zag-js/utils@0.1.2
@@ -881,10 +985,12 @@
 
 - Updated dependencies [[`cf14f6e9`](https://github.com/chakra-ui/zag/commit/cf14f6e971460bed8a65ae061492446cd47d41c0),
   [`0d3065e9`](https://github.com/chakra-ui/zag/commit/0d3065e94d707d3161d901576421beae66c32aba),
+  [`0c424958`](https://github.com/chakra-ui/zag/commit/0c4249584cb7db86474e51441210a6dc6d131d70),
   [`eafec246`](https://github.com/chakra-ui/zag/commit/eafec246b5dfb0c9f4cc421974a8bfa651fe81f0),
   [`587cbec9`](https://github.com/chakra-ui/zag/commit/587cbec9b32ee9e8faef5ceeefb779231b152018)]:
   - @zag-js/types@0.1.2
   - @zag-js/core@0.1.5
+  - @zag-js/slider@0.1.6
   - @zag-js/dom-utils@0.1.3
 
 ## 0.1.5
@@ -893,6 +999,7 @@
 
 - Updated dependencies [[`1274891d`](https://github.com/chakra-ui/zag/commit/1274891dc06ea869dd2db78685aab252b7baec91)]:
   - @zag-js/dom-utils@0.1.2
+  - @zag-js/slider@0.1.5
 
 ## 0.1.4
 
@@ -906,6 +1013,7 @@
   [`a71d5d2a`](https://github.com/chakra-ui/zag/commit/a71d5d2a984e4293ebeb55944e27df20492ad1c0),
   [`65df1e9a`](https://github.com/chakra-ui/zag/commit/65df1e9ad8948ee6e09519d1136f8178b693f277)]:
   - @zag-js/core@0.1.4
+  - @zag-js/slider@0.1.4
   - @zag-js/types@0.1.1
   - @zag-js/number-utils@0.1.2
 
@@ -921,6 +1029,7 @@
   - @zag-js/number-utils@0.1.1
   - @zag-js/utils@0.1.1
   - @zag-js/core@0.1.3
+  - @zag-js/slider@0.1.3
   - @zag-js/rect-utils@0.1.1
 
 ## 0.1.2
@@ -929,6 +1038,7 @@
 
 - Updated dependencies [[`3f715bd`](https://github.com/chakra-ui/zag/commit/3f715bdc4f52cdbf71ce9a22a3fc20d31c5fea89)]:
   - @zag-js/core@0.1.2
+  - @zag-js/slider@0.1.2
 
 ## 0.1.1
 
@@ -936,6 +1046,7 @@
 
 - Updated dependencies [[`8ef855e`](https://github.com/chakra-ui/zag/commit/8ef855efdf8aaca4355c816cc446bc745e34ec54)]:
   - @zag-js/core@0.1.1
+  - @zag-js/slider@0.1.1
 
 ## 0.1.0
 
@@ -948,6 +1059,7 @@
 
 - Updated dependencies [[`157aadc`](https://github.com/chakra-ui/zag/commit/157aadc3ac572d2289432efe32ae3f15a2be4ad1)]:
   - @zag-js/core@0.1.0
+  - @zag-js/slider@0.1.0
   - @zag-js/types@0.1.0
   - @zag-js/utils@0.1.0
   - @zag-js/dom-utils@0.1.0
diff --git a/packages/machines/slider/package.json b/packages/machines/slider/package.json
index d418f3abac..e0e2a26bbd 100644
--- a/packages/machines/slider/package.json
+++ b/packages/machines/slider/package.json
@@ -9,7 +9,8 @@
     "statechart",
     "component",
     "chakra-ui",
-    "slider"
+    "slider",
+    "range-slider"
   ],
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
@@ -29,12 +30,12 @@
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/core": "workspace:*",
+    "@zag-js/form-utils": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/dom-event": "workspace:*",
-    "@zag-js/form-utils": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "@zag-js/element-size": "workspace:*",
     "@zag-js/numeric-range": "workspace:*",
+    "@zag-js/element-size": "workspace:*",
     "@zag-js/types": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/machines/slider/src/index.ts b/packages/machines/slider/src/index.ts
index c21dc63aa4..7529e10620 100644
--- a/packages/machines/slider/src/index.ts
+++ b/packages/machines/slider/src/index.ts
@@ -1,5 +1,4 @@
 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, MachineApi as Api } from "./slider.types"
diff --git a/packages/machines/slider/src/slider.anatomy.ts b/packages/machines/slider/src/slider.anatomy.ts
index dc9275f72c..57267f4512 100644
--- a/packages/machines/slider/src/slider.anatomy.ts
+++ b/packages/machines/slider/src/slider.anatomy.ts
@@ -11,4 +11,5 @@ export const anatomy = createAnatomy("slider").parts(
   "markerGroup",
   "marker",
 )
+
 export const parts = anatomy.build()
diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts
index 0fb76a6226..2ebaca0464 100644
--- a/packages/machines/slider/src/slider.connect.ts
+++ b/packages/machines/slider/src/slider.connect.ts
@@ -13,178 +13,118 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./slider.anatomy"
 import { dom } from "./slider.dom"
 import type { MachineApi, Send, State } from "./slider.types"
+import { getRangeAtIndex } from "./slider.utils"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const ariaLabel = state.context["aria-label"]
   const ariaLabelledBy = state.context["aria-labelledby"]
-  const ariaValueText = state.context.getAriaValueText?.(state.context.value)
+  const sliderValue = state.context.value
 
   const isFocused = state.matches("focus")
   const isDragging = state.matches("dragging")
+
   const isDisabled = state.context.isDisabled
-  const isInteractive = state.context.isInteractive
   const isInvalid = state.context.invalid
-
-  function getPercentValueFn(percent: number) {
-    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
-  }
+  const isInteractive = state.context.isInteractive
 
   function getValuePercentFn(value: number) {
     return getValuePercent(value, state.context.min, state.context.max)
   }
 
+  function getPercentValueFn(percent: number) {
+    return getPercentValue(percent, state.context.min, state.context.max, state.context.step)
+  }
+
   return {
-    isFocused,
-    isDragging,
     value: state.context.value,
-    percent: getValuePercent(state.context.value, state.context.min, state.context.max),
+    isDragging,
+    isFocused,
 
-    setValue(value: number) {
-      send({ type: "SET_VALUE", value })
+    setValue(value) {
+      send({ type: "SET_VALUE", value: value })
     },
 
-    getPercentValue: getPercentValueFn,
+    getThumbValue(index) {
+      return sliderValue[index]
+    },
+
+    setThumbValue(index, value) {
+      send({ type: "SET_VALUE", index, value })
+    },
 
     getValuePercent: getValuePercentFn,
 
-    focus() {
-      dom.getThumbEl(state.context)?.focus()
+    getPercentValue: getPercentValueFn,
+
+    getThumbPercent(index) {
+      return getValuePercentFn(sliderValue[index])
     },
-    /**
-     * Function to increment the value of the slider by the step.
-     */
-    increment() {
-      send("INCREMENT")
+
+    setThumbPercent(index, percent) {
+      const value = getPercentValueFn(percent)
+      send({ type: "SET_VALUE", index, value })
     },
 
-    decrement() {
-      send("DECREMENT")
+    getThumbMin(index) {
+      return getRangeAtIndex(state.context, index).min
     },
 
-    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),
-    }),
+    getThumbMax(index) {
+      return getRangeAtIndex(state.context, index).max
+    },
+
+    increment(index) {
+      send({ type: "INCREMENT", index })
+    },
+
+    decrement(index) {
+      send({ type: "DECREMENT", index })
+    },
+
+    focus() {
+      if (!isInteractive) return
+      send({ type: "FOCUS", index: 0 })
+    },
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
-      dir: state.context.dir,
       id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context, 0),
       onClick(event) {
         if (!isInteractive) return
         event.preventDefault()
-        dom.getThumbEl(state.context)?.focus()
+        dom.getFirstEl(state.context)?.focus()
+      },
+      style: {
+        userSelect: "none",
       },
-      style: dom.getLabelStyle(),
     }),
 
-    thumbProps: normalize.element({
-      ...parts.thumb.attrs,
-      dir: state.context.dir,
-      id: dom.getThumbId(state.context),
+    rootProps: normalize.element({
+      ...parts.root.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      draggable: false,
-      "aria-invalid": ariaAttr(isInvalid),
       "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": ariaAttr(isDisabled),
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? 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,
-      onPointerDown(event) {
-        if (!isInteractive) return
-        send({ type: "THUMB_POINTER_DOWN" })
-        event.stopPropagation()
-      },
-      onBlur() {
-        if (!isInteractive) return
-        send("BLUR")
-      },
-      onFocus() {
-        if (!isInteractive) return
-        send("FOCUS")
-      },
-      onKeyDown(event) {
-        if (!isInteractive) return
-        const step = getEventStep(event) * state.context.step
-        let prevent = true
-        const keyMap: 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({
-      defaultValue: state.context.value,
-      name: state.context.name,
-      form: state.context.form,
-      id: dom.getHiddenInputId(state.context),
-      hidden: true,
+      "data-focus": dataAttr(isFocused),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context),
     }),
 
     outputProps: normalize.output({
       ...parts.output.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
       id: dom.getOutputId(state.context),
-      dir: state.context.dir,
-      htmlFor: dom.getHiddenInputId(state.context),
+      htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "),
       "aria-live": "off",
     }),
 
@@ -193,16 +133,119 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       dir: state.context.dir,
       id: dom.getTrackId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
-      style: dom.getTrackStyle(),
+      "data-focus": dataAttr(isFocused),
+      style: { position: "relative" },
     }),
 
+    getThumbProps(props) {
+      const { index } = props
+
+      const value = sliderValue[index]
+      const range = getRangeAtIndex(state.context, index)
+      const ariaValueText = state.context.getAriaValueText?.(value, index)
+      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel
+      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy
+
+      return normalize.element({
+        ...parts.thumb.attrs,
+        dir: state.context.dir,
+        "data-index": index,
+        id: dom.getThumbId(state.context, index),
+        "data-disabled": dataAttr(isDisabled),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(isFocused && state.context.focusedIndex === index),
+        draggable: false,
+        "aria-disabled": ariaAttr(isDisabled),
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
+        "aria-orientation": state.context.orientation,
+        "aria-valuemax": range.max,
+        "aria-valuemin": range.min,
+        "aria-valuenow": sliderValue[index],
+        "aria-valuetext": ariaValueText,
+        role: "slider",
+        tabIndex: isDisabled ? undefined : 0,
+        style: dom.getThumbStyle(state.context, index),
+        onPointerDown(event) {
+          if (!isInteractive) return
+          send({ type: "THUMB_POINTER_DOWN", index })
+          event.stopPropagation()
+        },
+        onBlur() {
+          if (!isInteractive) return
+          send("BLUR")
+        },
+        onFocus() {
+          if (!isInteractive) return
+          send({ type: "FOCUS", index })
+        },
+        onKeyDown(event) {
+          if (!isInteractive) return
+          const step = getEventStep(event) * state.context.step
+          let prevent = true
+          const keyMap: 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()
+            event.stopPropagation()
+          }
+        },
+      })
+    },
+
+    getHiddenInputProps(props) {
+      const { index } = props
+      return normalize.input({
+        name: `${state.context.name}[${index}]`,
+        form: state.context.form,
+        type: "text",
+        hidden: true,
+        defaultValue: state.context.value[index],
+        id: dom.getHiddenInputId(state.context, index),
+      })
+    },
+
     rangeProps: normalize.element({
+      id: dom.getRangeId(state.context),
       ...parts.range.attrs,
       dir: state.context.dir,
-      id: dom.getRangeId(state.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(isDisabled),
@@ -215,9 +258,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       dir: state.context.dir,
       id: dom.getControlId(state.context),
       "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
+      style: dom.getControlStyle(),
       onPointerDown(event) {
         if (!isInteractive) return
 
@@ -230,30 +274,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         event.preventDefault()
         event.stopPropagation()
       },
-      style: dom.getControlStyle(),
     }),
 
     markerGroupProps: normalize.element({
       ...parts.markerGroup.attrs,
-      dir: state.context.dir,
       role: "presentation",
+      dir: state.context.dir,
       "aria-hidden": true,
       "data-orientation": state.context.orientation,
       style: dom.getMarkerGroupStyle(),
     }),
 
-    getMarkerProps({ value }: { value: number }) {
-      const style = dom.getMarkerStyle(state.context, value)
-      const markerState =
-        value > state.context.value ? "over-value" : value === state.context.value ? "at-value" : "under-value"
+    getMarkerProps(props) {
+      const style = dom.getMarkerStyle(state.context, props.value)
+      let markerState: "over-value" | "under-value" | "at-value"
+
+      const first = state.context.value[0]
+      const last = state.context.value[state.context.value.length - 1]
+
+      if (props.value < first) {
+        markerState = "under-value"
+      } else if (props.value > last) {
+        markerState = "over-value"
+      } else {
+        markerState = "at-value"
+      }
 
       return normalize.element({
         ...parts.marker.attrs,
-        dir: state.context.dir,
-        id: dom.getMarkerId(state.context, value),
+        id: dom.getMarkerId(state.context, props.value),
         role: "presentation",
+        dir: state.context.dir,
         "data-orientation": state.context.orientation,
-        "data-value": value,
+        "data-value": props.value,
         "data-disabled": dataAttr(isDisabled),
         "data-state": markerState,
         style,
diff --git a/packages/machines/slider/src/slider.dom.ts b/packages/machines/slider/src/slider.dom.ts
index 46d935ab59..7eff16a978 100644
--- a/packages/machines/slider/src/slider.dom.ts
+++ b/packages/machines/slider/src/slider.dom.ts
@@ -1,32 +1,33 @@
-import { getRelativePoint } from "@zag-js/dom-event"
-import { createScope } from "@zag-js/dom-query"
+import { getRelativePoint, type Point } from "@zag-js/dom-event"
+import { createScope, queryAll } 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"
+import { styleGetterFns } from "./slider.style"
+import type { MachineContext as Ctx } from "./slider.types"
 
 export const dom = createScope({
-  ...styles,
-
+  ...styleGetterFns,
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx: Ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getThumbId: (ctx: Ctx, index: number) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
+  getHiddenInputId: (ctx: Ctx, index: number) => `slider:${ctx.id}:input:${index}`,
   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`,
+  getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
+  getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getMarkerId: (ctx: Ctx, value: number) => `slider:${ctx.id}:marker:${value}`,
+  getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getThumbEl: (ctx: Ctx, index: number) => dom.getById(ctx, dom.getThumbId(ctx, index)),
+  getHiddenInputEl: (ctx: Ctx, index: number) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx, index)),
   getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
+  getElements: (ctx: Ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
+  getFirstEl: (ctx: Ctx) => dom.getElements(ctx)[0],
+  getRangeEl: (ctx: Ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
 
-  getValueFromPoint(ctx: Ctx, point: Point): number | undefined {
+  getValueFromPoint(ctx: Ctx, point: Point) {
     const controlEl = dom.getControlEl(ctx)
     if (!controlEl) return
-
     const relativePoint = getRelativePoint(point, controlEl)
     const percent = relativePoint.getPercentValue({
       orientation: ctx.orientation,
@@ -35,10 +36,12 @@ export const dom = createScope({
     })
     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 })
+    const valueArray = Array.from(ctx.value)
+    valueArray.forEach((value, index) => {
+      const inputEl = dom.getHiddenInputEl(ctx, index)
+      if (!inputEl) return
+      dispatchInputValueEvent(inputEl, { value })
+    })
   },
 })
diff --git a/packages/machines/slider/src/slider.machine.ts b/packages/machines/slider/src/slider.machine.ts
index 0f937dc3ea..de2dc13a38 100644
--- a/packages/machines/slider/src/slider.machine.ts
+++ b/packages/machines/slider/src/slider.machine.ts
@@ -1,13 +1,25 @@
 import { createMachine } from "@zag-js/core"
 import { trackPointerMove } from "@zag-js/dom-event"
 import { raf } from "@zag-js/dom-query"
-import { trackElementSize } from "@zag-js/element-size"
+import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
 import { trackFormControl } from "@zag-js/form-utils"
-import { clampValue, getValuePercent } from "@zag-js/numeric-range"
+import { getValuePercent } from "@zag-js/numeric-range"
 import { compact, isEqual } from "@zag-js/utils"
 import { dom } from "./slider.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types"
-import { constrainValue, decrement, increment } from "./slider.utils"
+import {
+  assignArray,
+  constrainValue,
+  decrement,
+  getClosestIndex,
+  getRangeAtIndex,
+  increment,
+  normalizeValues,
+} from "./slider.utils"
+
+const isEqualSize = (a: ElementSize | null, b: ElementSize | null) => {
+  return a?.width === b?.width && a?.height === b?.height
+}
 
 export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
@@ -15,17 +27,19 @@ export function machine(userContext: UserDefinedContext) {
     {
       id: "slider",
       initial: "idle",
+
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
-        threshold: 5,
-        dir: "ltr",
-        origin: "start",
-        orientation: "horizontal",
-        value: 0,
-        step: 1,
+        focusedIndex: -1,
         min: 0,
         max: 100,
+        step: 1,
+        value: [0],
+        origin: "start",
+        orientation: "horizontal",
+        dir: "ltr",
+        minStepsBetweenThumbs: 0,
         disabled: false,
         ...ctx,
         fieldsetDisabled: false,
@@ -35,92 +49,103 @@ export function machine(userContext: UserDefinedContext) {
         isHorizontal: (ctx) => ctx.orientation === "horizontal",
         isVertical: (ctx) => ctx.orientation === "vertical",
         isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
-        isDisabled: (ctx) => ctx.disabled || ctx.fieldsetDisabled,
-        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),
-        hasMeasuredThumbSize: (ctx) => ctx.thumbSize !== null,
-        valuePercent: (ctx) => 100 * getValuePercent(ctx.value, ctx.min, ctx.max),
+        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
+        isInteractive: (ctx) => !(ctx.readOnly || ctx.isDisabled),
+        spacing: (ctx) => ctx.minStepsBetweenThumbs * ctx.step,
+        hasMeasuredThumbSize: (ctx) => ctx.thumbSize != null,
+        valuePercent(ctx) {
+          return ctx.value.map((value) => 100 * getValuePercent(value, ctx.min, ctx.max))
+        },
       },
 
       watch: {
-        value: ["syncInputElement"],
+        value: ["syncInputElements"],
       },
 
-      activities: ["trackFormControlState", "trackThumbSize"],
+      entry: ["coarseValue"],
+
+      activities: ["trackFormControlState", "trackThumbsSize"],
 
       on: {
-        SET_VALUE: {
-          actions: "setValue",
-        },
+        SET_VALUE: [
+          {
+            guard: "hasIndex",
+            actions: "setValueAtIndex",
+          },
+          { actions: "setValue" },
+        ],
         INCREMENT: {
-          actions: "increment",
+          actions: "incrementAtIndex",
         },
         DECREMENT: {
-          actions: "decrement",
+          actions: "decrementAtIndex",
         },
       },
 
-      entry: ["checkValue"],
-
       states: {
         idle: {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
+            },
+            FOCUS: {
+              target: "focus",
+              actions: "setFocusedIndex",
             },
-            FOCUS: "focus",
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"],
+              actions: ["setFocusedIndex", "focusActiveThumb"],
             },
           },
         },
-
         focus: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"],
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"],
             },
             THUMB_POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart", "focusThumb"],
+              actions: ["setFocusedIndex", "focusActiveThumb"],
             },
             ARROW_LEFT: {
               guard: "isHorizontal",
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             ARROW_RIGHT: {
               guard: "isHorizontal",
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             ARROW_UP: {
               guard: "isVertical",
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             ARROW_DOWN: {
               guard: "isVertical",
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             PAGE_UP: {
-              actions: "increment",
+              actions: "incrementAtIndex",
             },
             PAGE_DOWN: {
-              actions: "decrement",
+              actions: "decrementAtIndex",
             },
             HOME: {
-              actions: "setToMin",
+              actions: "setActiveThumbToMin",
             },
             END: {
-              actions: "setToMax",
+              actions: "setActiveThumbToMax",
+            },
+            BLUR: {
+              target: "idle",
+              actions: "clearFocusedIndex",
             },
-            BLUR: "idle",
           },
         },
-
         dragging: {
-          entry: "focusThumb",
+          entry: "focusActiveThumb",
           activities: "trackPointerMove",
           on: {
             POINTER_UP: {
@@ -138,11 +163,11 @@ export function machine(userContext: UserDefinedContext) {
       guards: {
         isHorizontal: (ctx) => ctx.isHorizontal,
         isVertical: (ctx) => ctx.isVertical,
+        hasIndex: (_ctx, evt) => evt.index != null,
       },
-
       activities: {
         trackFormControlState(ctx, _evt, { initialContext }) {
-          return trackFormControl(dom.getHiddenInputEl(ctx), {
+          return trackFormControl(dom.getRootEl(ctx), {
             onFieldsetDisabledChange(disabled) {
               ctx.fieldsetDisabled = disabled
             },
@@ -162,53 +187,82 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
-        trackThumbSize(ctx, _evt) {
+        trackThumbsSize(ctx) {
           if (ctx.thumbAlignment !== "contain" || ctx.thumbSize) return
-          return trackElementSize(dom.getThumbEl(ctx), (size) => {
-            if (size) ctx.thumbSize = size
+
+          return trackElementsSize({
+            getNodes: () => dom.getElements(ctx),
+            observeMutation: true,
+            callback(size) {
+              if (!size || isEqualSize(ctx.thumbSize, size)) return
+              ctx.thumbSize = size
+            },
           })
         },
       },
-
       actions: {
-        checkValue(ctx) {
-          ctx.value = constrainValue(ctx, ctx.value)
-        },
-        invokeOnChangeStart(ctx) {
-          ctx.onValueChangeStart?.({ value: ctx.value })
+        syncInputElements(ctx) {
+          ctx.value.forEach((value, index) => {
+            const inputEl = dom.getHiddenInputEl(ctx, index)
+            dom.setValue(inputEl, value)
+          })
         },
         invokeOnChangeEnd(ctx) {
           ctx.onValueChangeEnd?.({ value: ctx.value })
         },
+        setClosestThumbIndex(ctx, evt) {
+          const pointValue = dom.getValueFromPoint(ctx, evt.point)
+          if (pointValue == null) return
+
+          const focusedIndex = getClosestIndex(ctx, pointValue)
+          set.focusedIndex(ctx, focusedIndex)
+        },
+        setFocusedIndex(ctx, evt) {
+          set.focusedIndex(ctx, evt.index)
+        },
+        clearFocusedIndex(ctx) {
+          set.focusedIndex(ctx, -1)
+        },
         setPointerValue(ctx, evt) {
-          const value = dom.getValueFromPoint(ctx, evt.point)
-          if (value == null) return
-          set.value(ctx, clampValue(value, ctx.min, ctx.max))
+          const pointerValue = dom.getValueFromPoint(ctx, evt.point)
+          if (pointerValue == null) return
+
+          const value = constrainValue(ctx, pointerValue, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, value)
         },
-        focusThumb(ctx) {
-          raf(() => dom.getThumbEl(ctx)?.focus({ preventScroll: true }))
+        focusActiveThumb(ctx) {
+          raf(() => {
+            const thumbEl = dom.getThumbEl(ctx, ctx.focusedIndex)
+            thumbEl?.focus({ preventScroll: true })
+          })
         },
-        decrement(ctx, evt) {
-          const value = decrement(ctx, evt.step)
+        decrementAtIndex(ctx, evt) {
+          const value = decrement(ctx, evt.index, evt.step)
           set.value(ctx, value)
         },
-        increment(ctx, evt) {
-          const value = increment(ctx, evt.step)
+        incrementAtIndex(ctx, evt) {
+          const value = increment(ctx, evt.index, evt.step)
           set.value(ctx, value)
         },
-        setToMin(ctx) {
-          set.value(ctx, ctx.min)
+        setActiveThumbToMin(ctx) {
+          const { min } = getRangeAtIndex(ctx, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, min)
         },
-        setToMax(ctx) {
-          set.value(ctx, ctx.max)
+        setActiveThumbToMax(ctx) {
+          const { max } = getRangeAtIndex(ctx, ctx.focusedIndex)
+          set.valueAtIndex(ctx, ctx.focusedIndex, max)
         },
-        setValue(ctx, evt) {
-          const value = constrainValue(ctx, evt.value)
+        coarseValue(ctx) {
+          const value = normalizeValues(ctx, ctx.value)
           set.value(ctx, value)
         },
-        syncInputElement(ctx) {
-          const inputEl = dom.getHiddenInputEl(ctx)
-          dom.setValue(inputEl, ctx.value)
+        setValueAtIndex(ctx, evt) {
+          const value = constrainValue(ctx, evt.value, evt.index)
+          set.valueAtIndex(ctx, evt.index, value)
+        },
+        setValue(ctx, evt) {
+          const value = normalizeValues(ctx, evt.value)
+          set.value(ctx, value)
         },
       },
     },
@@ -217,15 +271,33 @@ export function machine(userContext: UserDefinedContext) {
 
 const invoke = {
   change: (ctx: MachineContext) => {
-    ctx.onValueChange?.({ value: ctx.value })
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+    })
     dom.dispatchChangeEvent(ctx)
   },
+  focusChange: (ctx: MachineContext) => {
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex,
+    })
+  },
 }
 
 const set = {
-  value: (ctx: MachineContext, value: number) => {
+  valueAtIndex: (ctx: MachineContext, index: number, value: number) => {
+    if (isEqual(ctx.value[index], value)) return
+    ctx.value[index] = value
+    invoke.change(ctx)
+  },
+  value: (ctx: MachineContext, value: number[]) => {
     if (isEqual(ctx.value, value)) return
-    ctx.value = value
+    assignArray(ctx.value, value)
     invoke.change(ctx)
   },
+  focusedIndex: (ctx: MachineContext, index: number) => {
+    if (isEqual(ctx.focusedIndex, index)) return
+    ctx.focusedIndex = index
+    invoke.focusChange(ctx)
+  },
 }
diff --git a/packages/machines/slider/src/slider.style.ts b/packages/machines/slider/src/slider.style.ts
index c042f734b6..b8cedb1bdc 100644
--- a/packages/machines/slider/src/slider.style.ts
+++ b/packages/machines/slider/src/slider.style.ts
@@ -2,6 +2,50 @@ import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range"
 import type { Style } from "@zag-js/types"
 import type { MachineContext as Ctx, SharedContext } from "./slider.types"
 
+/* -----------------------------------------------------------------------------
+ * Range style calculations
+ * -----------------------------------------------------------------------------*/
+
+function getBounds<T>(value: T[]): [T, T] {
+  const firstValue = value[0]
+  const lastThumb = value[value.length - 1]
+  return [firstValue, lastThumb]
+}
+
+export function getRangeOffsets(ctx: Ctx) {
+  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent)
+
+  if (ctx.valuePercent.length === 1) {
+    if (ctx.origin === "center") {
+      const isNegative = ctx.valuePercent[0] < 50
+      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%"
+      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`
+
+      return { start, end }
+    }
+
+    return { start: "0%", end: `${100 - lastPercent}%` }
+  }
+
+  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` }
+}
+
+function getRangeStyle(ctx: 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)",
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Thumb style calculations
  * -----------------------------------------------------------------------------*/
@@ -35,7 +79,7 @@ function getThumbOffset(ctx: SharedContext) {
   return getOffset(ctx, percent)
 }
 
-function getVisibility(ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredThumbSize">) {
+function getVisibility(ctx: Ctx) {
   let visibility: "visible" | "hidden" = "visible"
   if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
     visibility = "hidden"
@@ -43,46 +87,13 @@ function getVisibility(ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredT
   return visibility
 }
 
-function getThumbStyle(ctx: SharedContext): Style {
+function getThumbStyle(ctx: Ctx, index: number): Style {
   const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart"
   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)",
+    [placementProp]: `var(--slider-thumb-offset-${index})`,
   }
 }
 
@@ -104,9 +115,15 @@ function getControlStyle(): Style {
 
 function getRootStyle(ctx: Ctx): Style {
   const range = getRangeOffsets(ctx)
+
+  const offsetStyles = ctx.value.reduce<Style>((styles, value, index) => {
+    const offset = getThumbOffset({ ...ctx, value })
+    return { ...styles, [`--slider-thumb-offset-${index}`]: offset }
+  }, {})
+
   return {
+    ...offsetStyles,
     "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-thumb-offset": getThumbOffset(ctx),
     "--slider-range-start": range.start,
     "--slider-range-end": range.end,
   }
@@ -121,6 +138,7 @@ function getMarkerStyle(
   value: number,
 ): Style {
   return {
+    // @ts-expect-error
     visibility: getVisibility(ctx),
     position: "absolute",
     pointerEvents: "none",
@@ -132,22 +150,6 @@ function getMarkerStyle(
   }
 }
 
-/* -----------------------------------------------------------------------------
- * Label style calculations
- * -----------------------------------------------------------------------------*/
-
-function getLabelStyle(): Style {
-  return { userSelect: "none" }
-}
-
-/* -----------------------------------------------------------------------------
- * Label style calculations
- * -----------------------------------------------------------------------------*/
-
-function getTrackStyle(): Style {
-  return { position: "relative" }
-}
-
 /* -----------------------------------------------------------------------------
  * Label style calculations
  * -----------------------------------------------------------------------------*/
@@ -160,14 +162,11 @@ function getMarkerGroupStyle(): Style {
   }
 }
 
-export const styles = {
-  getThumbOffset,
+export const styleGetterFns = {
+  getRootStyle,
   getControlStyle,
   getThumbStyle,
   getRangeStyle,
-  getRootStyle,
   getMarkerStyle,
-  getLabelStyle,
-  getTrackStyle,
   getMarkerGroupStyle,
 }
diff --git a/packages/machines/slider/src/slider.types.ts b/packages/machines/slider/src/slider.types.ts
index 6d49bd1e98..b1ae8242a1 100644
--- a/packages/machines/slider/src/slider.types.ts
+++ b/packages/machines/slider/src/slider.types.ts
@@ -6,7 +6,12 @@ import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredB
  * -----------------------------------------------------------------------------*/
 
 export interface ValueChangeDetails {
-  value: number
+  value: number[]
+}
+
+export interface FocusChangeDetails {
+  focusedIndex: number
+  value: number[]
 }
 
 /* -----------------------------------------------------------------------------
@@ -15,32 +20,40 @@ export interface ValueChangeDetails {
 
 type ElementIds = Partial<{
   root: string
-  thumb: string
+  thumb(index: number): string
   control: string
   track: string
   range: string
   label: string
   output: string
-  hiddenInput: string
+  marker(index: number): string
 }>
 
 interface PublicContext extends DirectionProperty, CommonProperties {
   /**
-   * The ids of the elements in the slider. Useful for composition.
+   * The ids of the elements in the range slider. Useful for composition.
    */
   ids?: ElementIds
   /**
-   * The value of the slider
+   * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
    */
-  value: number
+  "aria-label"?: string[]
+  /**
+   * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
+   */
+  "aria-labelledby"?: string[]
   /**
-   * The name associated with the slider (when used in a form)
+   * The name associated with each slider thumb (when used in a form)
    */
   name?: string
   /**
    * The associate form of the underlying input element.
    */
   form?: string
+  /**
+   * The value of the range slider
+   */
+  value: number[]
   /**
    * Whether the slider is disabled
    */
@@ -50,58 +63,50 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   readOnly?: boolean
   /**
-   * Whether the slider value is invalid
+   * Whether the slider 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
+   * Function invoked when the value of the slider changes
    */
-  step: number
+  onValueChange?(details: ValueChangeDetails): void
   /**
-   * The orientation of the slider
+   * Function invoked when the slider value change is done
    */
-  orientation?: "vertical" | "horizontal"
+  onValueChangeEnd?(details: ValueChangeDetails): void
   /**
-   * - "start": Useful when the value represents an absolute value
-   * - "center": Useful when the value represents an offset (relative)
+   * Function invoked when the slider's focused index changes
    */
-  origin?: "start" | "center"
+  onFocusChange?(details: FocusChangeDetails): void
   /**
-   * The aria-label of the slider. Useful for providing an accessible name to the slider
+   * Function that returns a human readable value for the slider thumb
    */
-  "aria-label"?: string
+  getAriaValueText?(value: number, index: number): string
   /**
-   * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+   * The minimum value of the slider
    */
-  "aria-labelledby"?: string
+  min: number
   /**
-   * Whether to focus the slider thumb after interaction (scrub and keyboard)
+   * The maximum value of the slider
    */
-  focusThumbOnChange?: boolean
+  max: number
   /**
-   * Function that returns a human readable value for the slider
+   * The step value of the slider
    */
-  getAriaValueText?(value: number): string
+  step: number
   /**
-   * Function invoked when the value of the slider changes
+   * The minimum permitted steps between multiple thumbs.
    */
-  onValueChange?(details: ValueChangeDetails): void
+  minStepsBetweenThumbs: number
   /**
-   * Function invoked when the slider value change is done
+   * The orientation of the slider
    */
-  onValueChangeEnd?(details: ValueChangeDetails): void
+  orientation: "vertical" | "horizontal"
   /**
-   * Function invoked when the slider value change is started
+   * - "start": Useful when the value represents an absolute value
+   * - "center": Useful when the value represents an offset (relative)
    */
-  onValueChangeStart?(details: ValueChangeDetails): void
+  origin?: "start" | "center"
   /**
    * The alignment of the slider thumb relative to the track
    * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -109,9 +114,9 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   thumbAlignment?: "contain" | "center"
   /**
-   * The slider thumb dimensions.If not provided, the thumb size will be measured automatically.
+   * The slider thumbs dimensions
    */
-  thumbSize: Size | null
+  thumbSize: { width: number; height: number } | null
 }
 
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
@@ -119,24 +124,29 @@ export type UserDefinedContext = RequiredBy<PublicContext, "id">
 type ComputedContext = Readonly<{
   /**
    * @computed
-   * Whether the slider is interactive
+   * Whether the slider thumb has been measured
    */
-  isInteractive: boolean
+  hasMeasuredThumbSize: boolean
   /**
    * @computed
-   * Whether the thumb size has been measured
+   * Whether the slider is interactive
    */
-  hasMeasuredThumbSize: boolean
+  isInteractive: boolean
   /**
    * @computed
-   * Whether the slider is horizontal
+   * The raw value of the space between each thumb
    */
-  isHorizontal: boolean
+  spacing: number
   /**
    * @computed
    * Whether the slider is vertical
    */
   isVertical: boolean
+  /**
+   * @computed
+   * Whether the slider is horizontal
+   */
+  isHorizontal: boolean
   /**
    * @computed
    * Whether the slider is in RTL mode
@@ -144,9 +154,9 @@ type ComputedContext = Readonly<{
   isRtl: boolean
   /**
    * @computed
-   * The value of the slider as a percentage
+   * The percentage of the slider value relative to the slider min/max
    */
-  valuePercent: number
+  valuePercent: number[]
   /**
    * @computed
    * Whether the slider is disabled
@@ -157,9 +167,10 @@ type ComputedContext = Readonly<{
 type PrivateContext = Context<{
   /**
    * @internal
-   * The move threshold of the slider thumb before it is considered to be moved
+   * The active index of the range slider. This represents
+   * the currently dragged/focused thumb.
    */
-  threshold: number
+  focusedIndex: number
   /**
    * @internal
    * Whether the slider fieldset is disabled
@@ -181,68 +192,86 @@ export type Send = S.Send<S.AnyEventObject>
  * Component API
  * -----------------------------------------------------------------------------*/
 
-export interface Point {
-  x: number
-  y: number
-}
-
 interface Size {
   width: number
   height: number
 }
 
-interface MarkerProps {
+export interface MarkerProps {
   value: number
 }
 
+export interface ThumbProps {
+  index: number
+}
+
 export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
-   * Whether the slider is focused.
+   * The value of the slider.
    */
-  isFocused: boolean
+  value: number[]
   /**
    * Whether the slider is being dragged.
    */
   isDragging: boolean
   /**
-   * The value of the slider.
+   * Whether the slider is focused.
    */
-  value: number
+  isFocused: boolean
   /**
-   * The value of the slider as a percent.
+   * Function to set the value of the slider.
    */
-  percent: number
+  setValue(value: number[]): void
   /**
-   * Function to set the value of the slider.
+   * Returns the value of the thumb at the given index.
    */
-  setValue(value: number): void
+  getThumbValue(index: number): number
   /**
-   * Returns the value of the slider at the given percent.
+   * Sets the value of the thumb at the given index.
    */
-  getPercentValue: (percent: number) => number
+  setThumbValue(index: number, value: number): void
   /**
-   * Returns the percent of the slider at the given value.
+   * Returns the percent of the thumb at the given index.
    */
   getValuePercent: (value: number) => number
   /**
-   * Function to focus the slider.
+   * Returns the value of the thumb at the given percent.
    */
-  focus(): void
+  getPercentValue: (percent: number) => number
   /**
-   * Function to increment the value of the slider by the step.
+   * Returns the percent of the thumb at the given index.
    */
-  increment(): void
+  getThumbPercent(index: number): number
   /**
-   * Function to decrement the value of the slider by the step.
+   * Sets the percent of the thumb at the given index.
    */
-  decrement(): void
-
-  rootProps: T["element"]
+  setThumbPercent(index: number, percent: number): void
+  /**
+   * Returns the min value of the thumb at the given index.
+   */
+  getThumbMin(index: number): number
+  /**
+   * Returns the max value of the thumb at the given index.
+   */
+  getThumbMax(index: number): number
+  /**
+   * Function to increment the value of the slider at the given index.
+   */
+  increment(index: number): void
+  /**
+   * Function to decrement the value of the slider at the given index.
+   */
+  decrement(index: number): void
+  /**
+   * Function to focus the slider. This focuses the first thumb.
+   */
+  focus(): void
   labelProps: T["label"]
-  thumbProps: T["element"]
-  hiddenInputProps: T["input"]
+  rootProps: T["element"]
   outputProps: T["output"]
   trackProps: T["element"]
+  getThumbProps(props: ThumbProps): T["element"]
+  getHiddenInputProps(props: ThumbProps): T["input"]
   rangeProps: T["element"]
   controlProps: T["element"]
   markerGroupProps: T["element"]
diff --git a/packages/machines/slider/src/slider.utils.ts b/packages/machines/slider/src/slider.utils.ts
index 166e4d6335..266a95a0f7 100644
--- a/packages/machines/slider/src/slider.utils.ts
+++ b/packages/machines/slider/src/slider.utils.ts
@@ -1,31 +1,64 @@
-import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range"
+import {
+  clampValue,
+  getClosestValueIndex,
+  getNextStepValue,
+  getPreviousStepValue,
+  getValueRanges,
+  snapValueToStep,
+} from "@zag-js/numeric-range"
 import type { MachineContext as Ctx } from "./slider.types"
 
+export function normalizeValues(ctx: Ctx, nextValues: number[]) {
+  return nextValues.map((value, index, values) => {
+    return constrainValue({ ...ctx, value: values }, value, index)
+  })
+}
+
 export function clampPercent(percent: number) {
   return clampValue(percent, 0, 1)
 }
 
-export function constrainValue(ctx: Ctx, value: number) {
+export function getRangeAtIndex(ctx: Ctx, index: number) {
+  return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index]
+}
+
+export function constrainValue(ctx: Ctx, value: number, index: number) {
+  const range = getRangeAtIndex(ctx, index)
   const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step)
-  return clampValue(snapValue, ctx.min, ctx.max)
+  return clampValue(snapValue, range.min, range.max)
 }
 
-export function decrement(ctx: Ctx, step?: number) {
-  const index = 0
-  const values = getPreviousStepValue(index, {
-    ...ctx,
+export function decrement(ctx: Ctx, index?: number, step?: number) {
+  const idx = index ?? ctx.focusedIndex
+  const range = getRangeAtIndex(ctx, idx)
+  const nextValues = getPreviousStepValue(idx, {
+    ...range,
     step: step ?? ctx.step,
-    values: [ctx.value],
+    values: ctx.value,
   })
-  return values[index]
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max)
+  return nextValues
 }
 
-export function increment(ctx: Ctx, step?: number) {
-  const index = 0
-  const values = getNextStepValue(index, {
-    ...ctx,
+export function increment(ctx: Ctx, index?: number, step?: number) {
+  const idx = index ?? ctx.focusedIndex
+  const range = getRangeAtIndex(ctx, idx)
+  const nextValues = getNextStepValue(idx, {
+    ...range,
     step: step ?? ctx.step,
-    values: [ctx.value],
+    values: ctx.value,
   })
-  return values[index]
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max)
+  return nextValues
+}
+
+export function getClosestIndex(ctx: Ctx, pointValue: number) {
+  return getClosestValueIndex(ctx.value, pointValue)
+}
+
+export function assignArray(current: number[], next: number[]) {
+  for (let i = 0; i < next.length; i++) {
+    const value = next[i]
+    current[i] = value
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a372441b7f..03abe514a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@axe-core/playwright':
         specifier: 4.8.0
-        version: 4.8.0(playwright-core@1.38.1)
+        version: 4.8.0(playwright-core@1.39.0)
       '@babel/generator':
         specifier: 7.23.0
         version: 7.23.0
@@ -269,9 +269,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../../packages/machines/rating-group
@@ -507,9 +504,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../../packages/machines/rating-group
@@ -721,9 +715,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../../packages/machines/rating-group
@@ -944,9 +935,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../../packages/machines/rating-group
@@ -1161,9 +1149,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../../packages/machines/rating-group
@@ -2000,43 +1985,6 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
 
-  packages/machines/range-slider:
-    dependencies:
-      '@zag-js/anatomy':
-        specifier: workspace:*
-        version: link:../../anatomy
-      '@zag-js/core':
-        specifier: workspace:*
-        version: link:../../core
-      '@zag-js/dom-event':
-        specifier: workspace:*
-        version: link:../../utilities/dom-event
-      '@zag-js/dom-query':
-        specifier: workspace:*
-        version: link:../../utilities/dom-query
-      '@zag-js/element-size':
-        specifier: workspace:*
-        version: link:../../utilities/element-size
-      '@zag-js/form-utils':
-        specifier: workspace:*
-        version: link:../../utilities/form-utils
-      '@zag-js/numeric-range':
-        specifier: workspace:*
-        version: link:../../utilities/numeric-range
-      '@zag-js/slider':
-        specifier: workspace:*
-        version: link:../slider
-      '@zag-js/types':
-        specifier: workspace:*
-        version: link:../../types
-      '@zag-js/utils':
-        specifier: workspace:*
-        version: link:../../utilities/core
-    devDependencies:
-      clean-package:
-        specifier: 2.2.0
-        version: 2.2.0
-
   packages/machines/rating-group:
     dependencies:
       '@zag-js/anatomy':
@@ -2721,9 +2669,6 @@ importers:
       '@zag-js/radio-group':
         specifier: workspace:*
         version: link:../packages/machines/radio-group
-      '@zag-js/range-slider':
-        specifier: workspace:*
-        version: link:../packages/machines/range-slider
       '@zag-js/rating-group':
         specifier: workspace:*
         version: link:../packages/machines/rating-group
@@ -2854,13 +2799,13 @@ packages:
     resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
     dev: true
 
-  /@axe-core/playwright@4.8.0(playwright-core@1.38.1):
+  /@axe-core/playwright@4.8.0(playwright-core@1.39.0):
     resolution: {integrity: sha512-Pf/pkFrJ0PkBvZdDS57SgOT6/TRGPlmh8QJOmm/zpQfQPnfwHfP0LrpqueVhjhvKYD63M7NyLnj0G4Vo3kOaiA==}
     peerDependencies:
       playwright-core: '>= 1.0.0'
     dependencies:
       axe-core: 4.8.2
-      playwright-core: 1.38.1
+      playwright-core: 1.39.0
     dev: false
 
   /@babel/code-frame@7.22.10:
@@ -15073,12 +15018,6 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
 
-  /playwright-core@1.38.1:
-    resolution: {integrity: sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dev: false
-
   /playwright-core@1.39.0:
     resolution: {integrity: sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==}
     engines: {node: '>=16'}
diff --git a/shared/src/controls.ts b/shared/src/controls.ts
index 05225c2ab4..8d812509ec 100644
--- a/shared/src/controls.ts
+++ b/shared/src/controls.ts
@@ -88,29 +88,18 @@ export const popoverControls = defineControls({
   closeOnEsc: { type: "boolean", defaultValue: true },
 })
 
-export const sliderControls = defineControls({
-  disabled: { type: "boolean", defaultValue: false },
-  readOnly: { type: "boolean", defaultValue: false },
-  orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "horizontal" },
-  thumbAlignment: { type: "select", options: ["contain", "center"] as const, defaultValue: "contain" },
-  dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
-  origin: { type: "select", options: ["center", "start"] as const, defaultValue: "start" },
-  step: { type: "number", defaultValue: 1 },
-  min: { type: "number", defaultValue: 0 },
-  max: { type: "number", defaultValue: 100 },
-})
-
 export const radioControls = defineControls({
   disabled: { type: "boolean", defaultValue: false },
   readOnly: { type: "boolean", defaultValue: false },
 })
 
-export const rangeSliderControls = defineControls({
+export const sliderControls = defineControls({
   disabled: { type: "boolean", defaultValue: false },
   readOnly: { type: "boolean", defaultValue: false },
   orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "horizontal" },
   thumbAlignment: { type: "select", options: ["contain", "center"] as const, defaultValue: "contain" },
   dir: { type: "select", options: ["ltr", "rtl"] as const, defaultValue: "ltr" },
+  origin: { type: "select", options: ["center", "start"] as const, defaultValue: "start" },
   min: { type: "number", defaultValue: 0 },
   max: { type: "number", defaultValue: 100 },
   step: { type: "number", defaultValue: 1 },
diff --git a/shared/src/style.css b/shared/src/style.css
index 79986af4d1..026dbf80a6 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -497,21 +497,18 @@ main [data-testid="scrubber"] {
   width: 100%;
 }
 
-[data-scope="slider"][data-part="root"],
-[data-scope="range-slider"][data-part="root"] {
+[data-scope="slider"][data-part="root"] {
   max-width: 320px;
   width: 100%;
   display: flex;
   flex-direction: column;
 }
 
-[data-scope="slider"][data-part="root"][data-orientation="vertical"],
-[data-scope="range-slider"][data-part="root"][data-orientation="vertical"] {
+[data-scope="slider"][data-part="root"][data-orientation="vertical"] {
   height: 240px;
 }
 
-[data-scope="slider"][data-part="control"],
-[data-scope="range-slider"][data-part="control"] {
+[data-scope="slider"][data-part="control"] {
   --slider-thumb-size: 20px;
   --slider-track-height: 4px;
   display: flex;
@@ -520,18 +517,15 @@ main [data-testid="scrubber"] {
   position: relative;
 }
 
-[data-scope="slider"][data-part="control"][data-orientation="horizontal"],
-[data-scope="range-slider"][data-part="control"][data-orientation="horizontal"] {
+[data-scope="slider"][data-part="control"][data-orientation="horizontal"] {
   height: var(--slider-thumb-size);
 }
 
-[data-scope="slider"][data-part="control"][data-orientation="vertical"],
-[data-scope="range-slider"][data-part="control"][data-orientation="vertical"] {
+[data-scope="slider"][data-part="control"][data-orientation="vertical"] {
   width: var(--slider-thumb-size);
 }
 
-[data-scope="slider"][data-part="thumb"],
-[data-scope="range-slider"][data-part="thumb"] {
+[data-scope="slider"][data-part="thumb"] {
   all: unset;
   width: var(--slider-thumb-size);
   height: var(--slider-thumb-size);
@@ -540,23 +534,19 @@ main [data-testid="scrubber"] {
   box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 10px;
 }
 
-[data-scope="slider"][data-part="thumb"]:focus-visible,
-[data-scope="range-slider"][data-part="thumb"]:focus-visible {
+[data-scope="slider"][data-part="thumb"]:focus-visible {
   box-shadow: rgb(0 0 0 / 22%) 0px 0px 0px 5px;
 }
 
-[data-scope="slider"][data-part="thumb"]:hover:not([data-disabled]),
-[data-scope="range-slider"][data-part="thumb"]:hover:not([data-disabled]) {
+[data-scope="slider"][data-part="thumb"]:hover:not([data-disabled]) {
   background-color: rgb(245, 242, 255);
 }
 
-[data-scope="slider"][data-part="thumb"][data-disabled],
-[data-scope="range-slider"][data-part="thumb"][data-disabled] {
+[data-scope="slider"][data-part="thumb"][data-disabled] {
   background-color: lightgray;
 }
 
-[data-scope="slider"] .control-area,
-[data-scope="range-slider"] .control-area {
+[data-scope="slider"] .control-area {
   margin-top: 12px;
   display: flex;
 }
@@ -571,62 +561,51 @@ main [data-testid="scrubber"] {
   height: 100%;
 }
 
-[data-scope="slider"][data-part="track"],
-[data-scope="range-slider"][data-part="track"] {
+[data-scope="slider"][data-part="track"] {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 9999px;
 }
 
-[data-scope="slider"][data-part="track"][data-orientation="horizontal"],
-[data-scope="range-slider"][data-part="track"][data-orientation="horizontal"] {
+[data-scope="slider"][data-part="track"][data-orientation="horizontal"] {
   height: var(--slider-track-height);
   width: 100%;
 }
 
-[data-scope="slider"][data-part="track"][data-orientation="vertical"],
-[data-scope="range-slider"][data-part="track"][data-orientation="vertical"] {
+[data-scope="slider"][data-part="track"][data-orientation="vertical"] {
   height: 100%;
   width: var(--slider-track-height);
 }
 
-[data-scope="slider"][data-part="range"],
-[data-scope="range-slider"][data-part="range"] {
+[data-scope="slider"][data-part="range"] {
   background: magenta;
   border-radius: inherit;
 }
 
-[data-scope="slider"][data-part="range"][data-disabled],
-[data-scope="range-slider"][data-part="range"][data-disabled] {
+[data-scope="slider"][data-part="range"][data-disabled] {
   background: rgba(0, 0, 0, 0.4);
 }
 
-[data-scope="slider"][data-part="range"][data-orientation="horizontal"],
-[data-scope="range-slider"][data-part="range"][data-orientation="horizontal"] {
+[data-scope="slider"][data-part="range"][data-orientation="horizontal"] {
   height: 100%;
 }
 
-[data-scope="slider"][data-part="range"][data-orientation="vertical"],
-[data-scope="range-slider"][data-part="range"][data-orientation="vertical"] {
+[data-scope="slider"][data-part="range"][data-orientation="vertical"] {
   width: 100%;
 }
 
-[data-scope="slider"][data-part="output"],
-[data-scope="range-slider"][data-part="output"] {
+[data-scope="slider"][data-part="output"] {
   margin-inline-start: 12px;
 }
 
-[data-scope="slider"][data-part="marker-group"][data-orientation="vertical"],
-[data-scope="range-slider"][data-part="marker-group"][data-orientation="vertical"] {
+[data-scope="slider"][data-part="marker-group"][data-orientation="vertical"] {
   height: 100%;
 }
 
-[data-scope="slider"][data-part="marker"],
-[data-scope="range-slider"][data-part="marker"] {
+[data-scope="slider"][data-part="marker"] {
   color: lightgray;
 }
 
-[data-scope="slider"][data-part="marker"]:is([data-state="under-value"], [data-state="at-value"]),
-[data-scope="range-slider"][data-part="marker"]:is([data-state="under-value"], [data-state="at-value"]) {
+[data-scope="slider"][data-part="marker"]:is([data-state="under-value"], [data-state="at-value"]) {
   color: red;
 }
 
diff --git a/website/components/machines/range-slider.tsx b/website/components/machines/range-slider.tsx
index 17b38c53dc..c49d936e69 100644
--- a/website/components/machines/range-slider.tsx
+++ b/website/components/machines/range-slider.tsx
@@ -1,4 +1,4 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { chakra } from "@chakra-ui/system"
 import { Center, Flex } from "@chakra-ui/layout"
@@ -58,9 +58,9 @@ export function RangeSlider(props: any) {
             shadow="base"
             _disabled={{ bg: "gray.200" }}
             key={index}
-            {...api.getThumbProps(index)}
+            {...api.getThumbProps({ index })}
           >
-            <input {...api.getHiddenInputProps(index)} />
+            <input {...api.getHiddenInputProps({ index })} />
           </Center>
         ))}
       </Flex>
diff --git a/website/components/machines/slider.tsx b/website/components/machines/slider.tsx
index 6cb55a9064..b09b29585c 100644
--- a/website/components/machines/slider.tsx
+++ b/website/components/machines/slider.tsx
@@ -6,7 +6,7 @@ import { useId } from "react"
 
 export function Slider(props: any) {
   const [state, send] = useMachine(
-    slider.machine({ id: useId(), min: -50, max: 50, value: 20 }),
+    slider.machine({ id: useId(), min: -50, max: 50, value: [20] }),
     { context: props.controls },
   )
 
@@ -19,7 +19,7 @@ export function Slider(props: any) {
           Quantity
         </chakra.label>
         <output {...api.outputProps}>
-          <b>{api.value}</b>
+          <b>{api.value.at(0)}</b>
         </output>
       </Flex>
 
@@ -45,17 +45,20 @@ export function Slider(props: any) {
             {...api.rangeProps}
           />
         </chakra.div>
-        <Center
-          boxSize="20px"
-          rounded="full"
-          bg="white"
-          shadow="base"
-          className="focus-outline"
-          _disabled={{ bg: "gray.200" }}
-          {...api.thumbProps}
-        >
-          <input {...api.hiddenInputProps} />
-        </Center>
+        {api.value.map((_, index) => (
+          <Center
+            className="focus-outline"
+            boxSize="20px"
+            rounded="full"
+            bg="white"
+            shadow="base"
+            _disabled={{ bg: "gray.200" }}
+            key={index}
+            {...api.getThumbProps({ index })}
+          >
+            <input {...api.getHiddenInputProps({ index })} />
+          </Center>
+        ))}
       </Flex>
     </chakra.div>
   )
diff --git a/website/data/components/range-slider.mdx b/website/data/components/range-slider.mdx
index d924952dd4..ad5cee49bd 100644
--- a/website/data/components/range-slider.mdx
+++ b/website/data/components/range-slider.mdx
@@ -1,7 +1,7 @@
 ---
 title: Range Slider
 description: Using the range slider machine in your project.
-package: "@zag-js/range-slider"
+package: "@zag-js/slider"
 ---
 
 # Range Slider
@@ -9,7 +9,7 @@ package: "@zag-js/range-slider"
 A range slider is a multi-thumb slider used to select a range between two
 numbers.
 
-<Resources pkg="@zag-js/range-slider" />
+<Resources pkg="@zag-js/slider" />
 
 <Showcase id="RangeSlider" />
 
@@ -55,7 +55,7 @@ On a high level, the slider consists of:
 First, import the range slider package into your project
 
 ```jsx
-import * as rangeSlider from "@zag-js/range-slider"
+import * as rangeSlider from "@zag-js/slider"
 ```
 
 The range slider package exports two key functions:
@@ -86,7 +86,7 @@ increment/decrement its value.
 
 ```jsx {3}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     orientation: "vertical",
   }),
 )
@@ -96,7 +96,7 @@ const [state, send] = useMachine(
 
 ```jsx {3}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     values: [30, 60],
   }),
 )
@@ -112,7 +112,7 @@ For example, to ask the user for a value between `-10` and `10`, you can use:
 
 ```jsx {3-4}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     min: -10,
     max: 10,
   }),
@@ -129,7 +129,7 @@ places, you should set the value of step to `0.01`:
 
 ```jsx {5}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     min: 5,
     max: 10,
     step: 0.01,
@@ -144,7 +144,7 @@ callbacks are invoked. You can use this to setup custom behaviors in your app.
 
 ```jsx {3-8}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     onValueChange(details) {
       // details => { values: number[] }
       console.log("value changing to:", details)
@@ -165,7 +165,7 @@ equal values.
 
 ```jsx {3}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     minStepsBetweenThumbs: 1,
   }),
 )
@@ -180,7 +180,7 @@ to the form correctly.
 
 ```jsx {3}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     name: "quantity",
   }),
 )
@@ -196,7 +196,7 @@ To enable RTL support, pass the `dir: rtl` context property
 
 ```jsx {3}
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     dir: "rtl",
   }),
 )
@@ -289,4 +289,4 @@ label, control and thumb.
 The range slider's `api` provides properties and methods you can use to
 programmatically read and set the slider's value.
 
-<ApiTable name="range-slider" />
+<ApiTable name="slider" />
diff --git a/website/data/components/slider.mdx b/website/data/components/slider.mdx
index 3f24112ae8..fba9a9f6b1 100644
--- a/website/data/components/slider.mdx
+++ b/website/data/components/slider.mdx
@@ -100,7 +100,7 @@ const [state, send] = useMachine(
 ```jsx {3}
 const [state, send] = useMachine(
   slider.machine({
-    value: 30,
+    value: [30],
   }),
 )
 ```
diff --git a/website/data/snippets/react/range-slider/installation.mdx b/website/data/snippets/react/range-slider/installation.mdx
index 4de9dbdd6d..5dca563d0c 100644
--- a/website/data/snippets/react/range-slider/installation.mdx
+++ b/website/data/snippets/react/range-slider/installation.mdx
@@ -1,5 +1,5 @@
 ```bash
-npm install @zag-js/range-slider @zag-js/react
+npm install @zag-js/slider @zag-js/react
 # or
-yarn add @zag-js/range-slider @zag-js/react
+yarn add @zag-js/slider @zag-js/react
 ```
diff --git a/website/data/snippets/react/range-slider/usage.mdx b/website/data/snippets/react/range-slider/usage.mdx
index 2d8ba6e7fe..c1566baf4a 100644
--- a/website/data/snippets/react/range-slider/usage.mdx
+++ b/website/data/snippets/react/range-slider/usage.mdx
@@ -1,17 +1,17 @@
 ```jsx
-import * as rangeSlider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { useMachine, normalizeProps } from "@zag-js/react"
 
 export function RangeSlider() {
   const [state, send] = useMachine(
-    rangeSlider.machine({
+    slider.machine({
       id: "1",
       name: ["min", "max"],
       value: [10, 60],
     }),
   )
 
-  const api = rangeSlider.connect(state, send, normalizeProps)
+  const api = slider.connect(state, send, normalizeProps)
 
   return (
     <div {...api.rootProps}>
@@ -19,8 +19,8 @@ export function RangeSlider() {
         <div {...api.rangeProps} />
       </div>
       {api.value.map((_, index) => (
-        <div key={index} {...api.getThumbProps(index)}>
-          <input {...api.getHiddenInputProps(index)} />
+        <div key={index} {...api.getThumbProps({ index })}>
+          <input {...api.getHiddenInputProps({ index })} />
         </div>
       ))}
     </div>
diff --git a/website/data/snippets/react/slider/tick-marks.mdx b/website/data/snippets/react/slider/tick-marks.mdx
index 8cba78c738..381f920cbd 100644
--- a/website/data/snippets/react/slider/tick-marks.mdx
+++ b/website/data/snippets/react/slider/tick-marks.mdx
@@ -5,9 +5,11 @@
     <div {...api.trackProps}>
       <div {...api.rangeProps} />
     </div>
-    <div {...api.thumbProps}>
-      <input {...api.hiddenInputProps} />
-    </div>
+    {api.value.map((_, index) => (
+      <div key={index} {...api.getThumbProps({ index })}>
+        <input {...api.getHiddenInputProps({ index })} />
+      </div>
+    ))}
   </div>
   <div {...api.markerGroupProps}>
     <span {...api.getMarkerProps({ value: 10 })}>|</span>
diff --git a/website/data/snippets/react/slider/usage.mdx b/website/data/snippets/react/slider/usage.mdx
index 08068a128b..adc3da8a45 100644
--- a/website/data/snippets/react/slider/usage.mdx
+++ b/website/data/snippets/react/slider/usage.mdx
@@ -3,7 +3,7 @@ import * as slider from "@zag-js/slider"
 import { useMachine, normalizeProps } from "@zag-js/react"
 
 export function Slider() {
-  const [state, send] = useMachine(slider.machine({ id: "1" }))
+  const [state, send] = useMachine(slider.machine({ id: "1", value: [0] }))
 
   const api = slider.connect(state, send, normalizeProps)
 
@@ -11,15 +11,17 @@ export function Slider() {
     <div {...api.rootProps}>
       <div>
         <label {...api.labelProps}>Slider Label</label>
-        <output {...api.outputProps}>{api.value}</output>
+        <output {...api.outputProps}>{api.value.at(0)}</output>
       </div>
       <div {...api.controlProps}>
         <div {...api.trackProps}>
           <div {...api.rangeProps} />
         </div>
-        <div {...api.thumbProps}>
-          <input {...api.hiddenInputProps} />
-        </div>
+        {api.value.map((_, index) => (
+          <div key={index} {...api.getThumbProps({ index })}>
+            <input {...api.getHiddenInputProps({ index })} />
+          </div>
+        ))}
       </div>
     </div>
   )
diff --git a/website/data/snippets/solid/range-slider/installation.mdx b/website/data/snippets/solid/range-slider/installation.mdx
index 7d762eb455..778225dacd 100644
--- a/website/data/snippets/solid/range-slider/installation.mdx
+++ b/website/data/snippets/solid/range-slider/installation.mdx
@@ -1,5 +1,5 @@
 ```bash
-npm install @zag-js/range-slider @zag-js/solid
+npm install @zag-js/slider @zag-js/solid
 # or
-yarn add @zag-js/range-slider @zag-js/solid
+yarn add @zag-js/slider @zag-js/solid
 ```
diff --git a/website/data/snippets/solid/range-slider/usage.mdx b/website/data/snippets/solid/range-slider/usage.mdx
index 9770549366..85e4331050 100644
--- a/website/data/snippets/solid/range-slider/usage.mdx
+++ b/website/data/snippets/solid/range-slider/usage.mdx
@@ -1,18 +1,18 @@
 ```jsx
-import * as rangeSlider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, For, createUniqueId } from "solid-js"
 
 export function RangeSlider() {
   const [state, send] = useMachine(
-    rangeSlider.machine({
+    slider.machine({
       id: createUniqueId(),
       name: ["min", "max"],
       value: [10, 60],
     }),
   )
 
-  const api = createMemo(() => rangeSlider.connect(state, send, normalizeProps))
+  const api = createMemo(() => slider.connect(state, send, normalizeProps))
 
   return (
     <div {...api().rootProps}>
@@ -21,8 +21,8 @@ export function RangeSlider() {
       </div>
       <For each={api().value}>
         {(_, index) => (
-          <div {...api().getThumbProps(index())}>
-            <input {...api().getHiddenInputProps(index())} />
+          <div {...api().getThumbProps({ index: index() })}>
+            <input {...api().getHiddenInputProps({ index: index() })} />
           </div>
         )}
       </For>
diff --git a/website/data/snippets/solid/slider/tick-marks.mdx b/website/data/snippets/solid/slider/tick-marks.mdx
index f2713391d0..445e9a3d6c 100644
--- a/website/data/snippets/solid/slider/tick-marks.mdx
+++ b/website/data/snippets/solid/slider/tick-marks.mdx
@@ -5,8 +5,8 @@
     <div {...api().trackProps}>
       <div {...api().rangeProps} />
     </div>
-    <div {...api().thumbProps}>
-      <input {...api().hiddenInputProps} />
+    <div {...api().getThumbProps({ index: 0 })}>
+      <input {...api().getHiddenInputProps({ index: 0 })} />
     </div>
   </div>
   <div {...api().markerGroupProps}>
diff --git a/website/data/snippets/solid/slider/usage.mdx b/website/data/snippets/solid/slider/usage.mdx
index 71b781f5dd..ba514ceabb 100644
--- a/website/data/snippets/solid/slider/usage.mdx
+++ b/website/data/snippets/solid/slider/usage.mdx
@@ -1,10 +1,12 @@
 ```jsx
 import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { createMemo, createUniqueId } from "solid-js"
+import { createMemo, For, createUniqueId } from "solid-js"
 
 export function Slider() {
-  const [state, send] = useMachine(slider.machine({ id: createUniqueId() }))
+  const [state, send] = useMachine(
+    slider.machine({ id: createUniqueId(), value: [0] }),
+  )
 
   const api = createMemo(() => slider.connect(state, send, normalizeProps))
 
@@ -12,15 +14,19 @@ export function Slider() {
     <div {...api().rootProps}>
       <div>
         <label {...api().labelProps}>Slider Label</label>
-        <output {...api().outputProps}>{api().value}</output>
+        <output {...api().outputProps}>{api().value.at(0)}</output>
       </div>
       <div {...api().controlProps}>
         <div {...api().trackProps}>
           <div {...api().rangeProps} />
         </div>
-        <div {...api().thumbProps}>
-          <input {...api().hiddenInputProps} />
-        </div>
+        <For each={api().value}>
+          {(_, index) => (
+            <div {...api().getThumbProps({ index: index() })}>
+              <input {...api().getHiddenInputProps({ index: index() })} />
+            </div>
+          )}
+        </For>
       </div>
     </div>
   )
diff --git a/website/data/snippets/vue-jsx/range-slider/installation.mdx b/website/data/snippets/vue-jsx/range-slider/installation.mdx
index 31225e0876..600256025a 100644
--- a/website/data/snippets/vue-jsx/range-slider/installation.mdx
+++ b/website/data/snippets/vue-jsx/range-slider/installation.mdx
@@ -1,5 +1,5 @@
 ```bash
-npm install @zag-js/range-slider @zag-js/vue
+npm install @zag-js/slider @zag-js/vue
 # or
-yarn add @zag-js/range-slider @zag-js/vue
+yarn add @zag-js/slider @zag-js/vue
 ```
diff --git a/website/data/snippets/vue-jsx/range-slider/usage.mdx b/website/data/snippets/vue-jsx/range-slider/usage.mdx
index 2a5e8b8382..87ba6f84a5 100644
--- a/website/data/snippets/vue-jsx/range-slider/usage.mdx
+++ b/website/data/snippets/vue-jsx/range-slider/usage.mdx
@@ -1,5 +1,5 @@
 ```jsx
-import * as rangeSlider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import { defineComponent, computed, h, Fragment } from "vue"
 
@@ -7,7 +7,7 @@ export default defineComponent({
   name: "RangeSlider",
   setup() {
     const [state, send] = useMachine(
-      rangeSlider.machine({
+      slider.machine({
         id: "1",
         name: ["min", "max"],
         value: [10, 60],
@@ -26,8 +26,8 @@ export default defineComponent({
             <div {...api.rangeProps} />
           </div>
           {api.value.map((_, index) => (
-            <div key={index} {...api.getThumbProps(index)}>
-              <input {...api.getHiddenInputProps(index)} />
+            <div key={index} {...api.getThumbProps({ index })}>
+              <input {...api.getHiddenInputProps({ index })} />
             </div>
           ))}
         </div>
diff --git a/website/data/snippets/vue-jsx/slider/tick-marks.mdx b/website/data/snippets/vue-jsx/slider/tick-marks.mdx
index 8cba78c738..c23a20969e 100644
--- a/website/data/snippets/vue-jsx/slider/tick-marks.mdx
+++ b/website/data/snippets/vue-jsx/slider/tick-marks.mdx
@@ -5,8 +5,8 @@
     <div {...api.trackProps}>
       <div {...api.rangeProps} />
     </div>
-    <div {...api.thumbProps}>
-      <input {...api.hiddenInputProps} />
+    <div {...api.getThumbProps({ index: 0 })}>
+      <input {...api.getHiddenInputProps({ index: 0 })} />
     </div>
   </div>
   <div {...api.markerGroupProps}>
diff --git a/website/data/snippets/vue-jsx/slider/usage.mdx b/website/data/snippets/vue-jsx/slider/usage.mdx
index 8527ada673..a860455e0d 100644
--- a/website/data/snippets/vue-jsx/slider/usage.mdx
+++ b/website/data/snippets/vue-jsx/slider/usage.mdx
@@ -6,7 +6,7 @@ import { defineComponent, computed, h, Fragment } from "vue"
 export default defineComponent({
   name: "Slider",
   setup() {
-    const [state, send] = useMachine(slider.machine({ id: "1" }))
+    const [state, send] = useMachine(slider.machine({ id: "1", value: [0] }))
 
     const apiRef = computed(() =>
       slider.connect(state.value, send, normalizeProps),
@@ -18,15 +18,17 @@ export default defineComponent({
         <div {...api.rootProps}>
           <div>
             <label {...api.labelProps}>Slider Label</label>
-            <output {...api.outputProps}>{api.value}</output>
+            <output {...api.outputProps}>{api.value.at(0)}</output>
           </div>
           <div {...api.controlProps}>
             <div {...api.trackProps}>
               <div {...api.rangeProps} />
             </div>
-            <div {...api.thumbProps}>
-              <input {...api.hiddenInputProps} />
-            </div>
+            {api.value.map((_, index) => (
+              <div key={index} {...api.getThumbProps({ index })}>
+                <input {...api.getHiddenInputProps({ index })} />
+              </div>
+            ))}
           </div>
         </div>
       )
diff --git a/website/data/snippets/vue-sfc/range-slider/installation.mdx b/website/data/snippets/vue-sfc/range-slider/installation.mdx
index 31225e0876..600256025a 100644
--- a/website/data/snippets/vue-sfc/range-slider/installation.mdx
+++ b/website/data/snippets/vue-sfc/range-slider/installation.mdx
@@ -1,5 +1,5 @@
 ```bash
-npm install @zag-js/range-slider @zag-js/vue
+npm install @zag-js/slider @zag-js/vue
 # or
-yarn add @zag-js/range-slider @zag-js/vue
+yarn add @zag-js/slider @zag-js/vue
 ```
diff --git a/website/data/snippets/vue-sfc/range-slider/usage.mdx b/website/data/snippets/vue-sfc/range-slider/usage.mdx
index c03ae081fe..4101943269 100644
--- a/website/data/snippets/vue-sfc/range-slider/usage.mdx
+++ b/website/data/snippets/vue-sfc/range-slider/usage.mdx
@@ -1,18 +1,18 @@
 ```md
 <script setup>
-import * as rangeSlider from "@zag-js/range-slider";
+import * as slider from "@zag-js/slider";
 import { normalizeProps, useMachine } from "@zag-js/vue";
 import { computed } from "vue";
 
 const [state, send] = useMachine(
-  rangeSlider.machine({
+  slider.machine({
     id: "1",
     name: ["min", "max"],
     value: [10, 60],
   })
 );
 const api = computed(() =>
-  rangeSlider.connect(state.value, send, normalizeProps)
+  slider.connect(state.value, send, normalizeProps)
 );
 </script>
 
@@ -24,9 +24,9 @@ const api = computed(() =>
     <div
       v-for="(_, index) in api.value"
       :key="index"
-      v-bind="api.getThumbProps(index)"
+      v-bind="api.getThumbProps({ index })"
     >
-      <input v-bind="api.getHiddenInputProps(index)" />
+      <input v-bind="api.getHiddenInputProps({ index })" />
     </div>
   </div>
 </template>
diff --git a/website/data/snippets/vue-sfc/slider/tick-marks.mdx b/website/data/snippets/vue-sfc/slider/tick-marks.mdx
index 927f6f9b54..a68aa44c70 100644
--- a/website/data/snippets/vue-sfc/slider/tick-marks.mdx
+++ b/website/data/snippets/vue-sfc/slider/tick-marks.mdx
@@ -6,8 +6,8 @@
     <div v-bind="api.trackProps">
       <div v-bind="api.rangeProps" />
     </div>
-    <div v-bind="api.thumbProps">
-      <input v-bind="api.hiddenInputProps" />
+    <div v-bind="api.getThumbProps({ index: 0 })">
+      <input v-bind="api.getHiddenInputProps({ index: 0 })" />
     </div>
   </div>
   <div v-bind="api.markerGroupProps">
diff --git a/website/data/snippets/vue-sfc/slider/usage.mdx b/website/data/snippets/vue-sfc/slider/usage.mdx
index 7494b49504..4dbb03ebfe 100644
--- a/website/data/snippets/vue-sfc/slider/usage.mdx
+++ b/website/data/snippets/vue-sfc/slider/usage.mdx
@@ -4,7 +4,7 @@ import * as slider from "@zag-js/slider";
 import { normalizeProps, useMachine } from "@zag-js/vue";
 import { computed } from "vue";
 
-const [state, send] = useMachine(slider.machine({ id: "1" }));
+const [state, send] = useMachine(slider.machine({ id: "1", value: [0] }));
 const api = computed(() => slider.connect(state.value, send, normalizeProps));
 </script>
 
@@ -12,14 +12,18 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps));
   <div ref="ref" v-bind="api.rootProps">
     <div>
       <label v-bind="api.labelProps">Slider Label</label>
-      <output v-bind="api.outputProps">{{ api.value }}</output>
+      <output v-bind="api.outputProps">{{ api.value.at(0) }}</output>
     </div>
     <div v-bind="api.controlProps">
       <div v-bind="api.trackProps">
         <div v-bind="api.rangeProps" />
       </div>
-      <div v-bind="api.thumbProps">
-        <input v-bind="api.hiddenInputProps" />
+      <div
+        v-for="(_, index) in api.value"
+        :key="index"
+        v-bind="api.getThumbProps({ index })"
+      >
+        <input v-bind="api.getHiddenInputProps({ index })" />
       </div>
     </div>
   </div>
diff --git a/website/package.json b/website/package.json
index 10e252cbb1..bcf5fef2b2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -41,11 +41,10 @@
     "@zag-js/popover": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/react": "workspace:*",
     "@zag-js/select": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/switch": "workspace:*",
     "@zag-js/tabs": "workspace:*",