feat(Slider): new component (#57)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app.vue

@@ -33,6 +33,7 @@ const components = [
   'separator',
   'skeleton',
   'slideover',
+  'slider',
   'switch',
   'tabs',
   'textarea',

playground/components/FormElementsExample.vue

@@ -22,8 +22,8 @@ const schema = z.object({
   }),
   radioGroup: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
-  })
-  // range: z.number().max(20, { message: 'Must be less than 20' })
+  }),
+  slider: z.number().max(20, { message: 'Must be less than 20' })
 })
 
 type Schema = z.output<typeof schema>
@@ -70,6 +70,10 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
       <USwitch v-model="state.switch" />
     </UFormField>
 
+    <UFormField name="slider">
+      <USlider v-model="state.slider" />
+    </UFormField>
+
     <div class="flex gap-2">
       <UButton color="gray" type="submit" :disabled="form?.disabled">
         Submit

playground/pages/slider.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import theme from '#build/ui/slider'
+
+const sizes = Object.keys(theme.variants.size)
+
+const value = ref(50)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col gap-4 w-48">
+      <USlider v-model="value" />
+      <USlider :default-value="100" />
+      <USlider color="green" />
+      <USlider inverted />
+      <USlider disabled />
+      <USlider :min="4" :max="12" :step="2" />
+    </div>
+
+    <div class="flex flex-col gap-4 w-48">
+      <USlider :model-value="[0, 10]" />
+      <USlider :model-value="[0, 10, 30]" />
+      <USlider :model-value="[0, 30]" :min-steps-between-thumbs="20" />
+      <USlider :default-value="[0, 10]" />
+    </div>
+
+    <div class="flex items-center gap-4">
+      <USlider v-for="size in sizes" :key="size" :size="(size as any)" class="w-32" />
+    </div>
+
+    <div class="h-48">
+      <USlider v-model="value" orientation="vertical" />
+    </div>
+  </div>
+</template>