docs: add new example for slider in form (#377)

apps/www/__registry__/index.ts

@@ -633,6 +633,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/SliderDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SliderDemo.vue"],
     },
+    "SliderForm": {
+      name: "SliderForm",
+      type: "components:example",
+      registryDependencies: ["button","form","select","toast"],
+      component: () => import("../src/lib/registry/default/example/SliderForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/SliderForm.vue"],
+    },
     "SonnerDemo": {
       name: "SonnerDemo",
       type: "components:example",
@@ -1600,6 +1607,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SliderDemo.vue"],
     },
+    "SliderForm": {
+      name: "SliderForm",
+      type: "components:example",
+      registryDependencies: ["button","form","select","toast"],
+      component: () => import("../src/lib/registry/new-york/example/SliderForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
+    },
     "SonnerDemo": {
       name: "SonnerDemo",
       type: "components:example",

apps/www/src/content/docs/components/form.md

@@ -327,6 +327,7 @@ See the following links for more examples on how to use the `vee-validate` featu
 - [Input](/docs/components/input#form)
 - [Radio Group](/docs/components/radio-group#form)
 - [Select](/docs/components/select#form)
+- [Slider](/docs/components/slider#form)
 - [Switch](/docs/components/switch#form)
 - [Textarea](/docs/components/textarea#form)
 - [Combobox](/docs/components/combobox#form)

apps/www/src/content/docs/components/slider.md

@@ -1,11 +1,11 @@
 ---
 title: Slider
 description: An input where the user selects a value from within a given range.
-source: apps/www/src/lib/registry/default/ui/slider 
+source: apps/www/src/lib/registry/default/ui/slider
 primitive: https://www.radix-vue.com/components/slider.html
 ---
 
-<ComponentPreview name="SliderDemo" /> 
+<ComponentPreview name="SliderDemo" />
 
 ## Installation
 
@@ -25,4 +25,10 @@ import { Slider } from '@/components/ui/slider'
     :default-value="[33]" :max="100" :step="1"
   />
 </template>
-```
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="SliderForm" />

apps/www/src/lib/registry/default/example/SliderForm.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { Slider } from '@/lib/registry/default/ui/slider'
+import { toast } from '@/lib/registry/default/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  duration: z.array(
+    z.number().min(0).max(60),
+  ),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="duration">
+      <FormItem>
+        <FormLabel>Duration</FormLabel>
+        <FormControl>
+          <Slider
+            v-bind="componentField"
+            :default-value="[30]"
+            :max="60"
+            :min="5"
+            :step="5"
+          />
+          <FormDescription class="flex justify-between">
+            <span>How many minutes are you available?</span>
+            <span>{{ componentField.modelValue?.[0] ?? "30" }} min</span>
+          </FormDescription>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>

apps/www/src/lib/registry/new-york/example/SliderForm.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { Slider } from '@/lib/registry/new-york/ui/slider'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+
+const formSchema = toTypedSchema(z.object({
+  duration: z.array(
+    z.number().min(0).max(60),
+  ),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="duration">
+      <FormItem>
+        <FormLabel>Duration</FormLabel>
+        <FormControl>
+          <Slider
+            v-bind="componentField"
+            :default-value="[30]"
+            :max="60"
+            :min="5"
+            :step="5"
+          />
+          <FormDescription class="flex justify-between">
+            <span>How many minutes are you available?</span>
+            <span>{{ componentField.modelValue?.[0] ?? "30" }} min</span>
+          </FormDescription>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>