docs: fix range slider snippets

chakra-ui · Feb 16, 2024 · 5401dd5 · 5401dd5
1 parent 2c14449
commit 5401dd5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 47 deletions.
diff --git a/website/data/snippets/react/range-slider/usage.mdx b/website/data/snippets/react/range-slider/usage.mdx
@@ -15,14 +15,16 @@ export function RangeSlider() {
 
   return (
     <div {...api.rootProps}>
-      <div {...api.trackProps}>
-        <div {...api.rangeProps} />
-      </div>
-      {api.value.map((_, index) => (
-        <div key={index} {...api.getThumbProps({ index })}>
-          <input {...api.getHiddenInputProps({ index })} />
+      <div {...api.controlProps}>
+        <div {...api.trackProps}>
+          <div {...api.rangeProps} />
         </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/usage.mdx b/website/data/snippets/solid/range-slider/usage.mdx
@@ -16,16 +16,18 @@ export function RangeSlider() {
 
   return (
     <div {...api().rootProps}>
-      <div {...api().trackProps}>
-        <div {...api().rangeProps} />
+      <div {...api().controlProps}>
+        <div {...api().trackProps}>
+          <div {...api().rangeProps} />
+        </div>
+        <For each={api().value}>
+          {(_, index) => (
+            <div {...api().getThumbProps({ index: index() })}>
+              <input {...api().getHiddenInputProps({ index: index() })} />
+            </div>
+          )}
+        </For>
       </div>
-      <For each={api().value}>
-        {(_, index) => (
-          <div {...api().getThumbProps({ index: index() })}>
-            <input {...api().getHiddenInputProps({ index: index() })} />
-          </div>
-        )}
-      </For>
     </div>
   )
 }

diff --git a/website/data/snippets/vue-jsx/range-slider/usage.mdx b/website/data/snippets/vue-jsx/range-slider/usage.mdx
@@ -15,21 +15,23 @@ export default defineComponent({
     )
 
     const apiRef = computed(() =>
-      rangeSlider.connect(state.value, send, normalizeProps),
+      slider.connect(state.value, send, normalizeProps),
     )
 
     return () => {
       const api = apiRef.value
       return (
         <div {...api.rootProps}>
-          <div {...api.trackProps}>
-            <div {...api.rangeProps} />
-          </div>
-          {api.value.map((_, index) => (
-            <div key={index} {...api.getThumbProps({ index })}>
-              <input {...api.getHiddenInputProps({ index })} />
+          <div {...api.controlProps}>
+            <div {...api.trackProps}>
+              <div {...api.rangeProps} />
             </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/usage.mdx b/website/data/snippets/vue-sfc/range-slider/usage.mdx
@@ -1,32 +1,32 @@
-```md
+```html
 <script setup>
-import * as slider from "@zag-js/slider";
-import { normalizeProps, useMachine } from "@zag-js/vue";
-import { computed } from "vue";
+  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",
-    name: ["min", "max"],
-    value: [10, 60],
-  })
-);
-const api = computed(() =>
-  slider.connect(state.value, send, normalizeProps)
-);
+  const [state, send] = useMachine(
+    slider.machine({
+      id: "1",
+      name: ["min", "max"],
+      value: [10, 60],
+    }),
+  )
+  const api = computed(() => slider.connect(state.value, send, normalizeProps))
 </script>
 
 <template>
   <div ref="ref" v-bind="api.rootProps">
-    <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-bind="api.controlProps">
+      <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>
     </div>
   </div>
 </template>