From b9e3fcb0f16a744660510fccb1a5c783388757f2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 Jul 2024 12:52:29 +0200
Subject: [PATCH] docs(slider): update

---
 docs/content/3.components/slider.md | 132 +++++++++++++++++++++++++++-
 docs/nuxt.config.ts                 |   1 +
 2 files changed, 132 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/slider.md b/docs/content/3.components/slider.md
index 6a1f026e..a7daca04 100644
--- a/docs/content/3.components/slider.md
+++ b/docs/content/3.components/slider.md
@@ -11,7 +11,137 @@ links:
 
 ## Usage
 
-## Examples
+Use the `v-model` directive to control the value of the Slider.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 50
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+props:
+  defaultValue: 50
+---
+::
+
+### Min / Max
+
+Use the `min` and `max` props to set the minimum and maximum values of the Slider. Defaults to `0` and `100`.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  min: 0
+  max: 50
+  defaultValue: 50
+---
+::
+
+### Step
+
+Use the `step` prop to set the increment value of the Slider. Defaults to `1`.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  step: 10
+  defaultValue: 50
+---
+::
+
+### Multiple
+
+Use the `v-model` directive or the `default-value` prop with an array of values to create a range Slider.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: [25, 75]
+---
+::
+
+Use the `min-steps-between-thumbs` prop to limit the minimum distance between the thumbs.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: [25, 50, 75]
+  minStepsBetweenThumbs: 10
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Slider.
+
+::component-code
+---
+ignore:
+  - defaultValue
+  - class
+props:
+  orientation: vertical
+  defaultValue: 50
+  class: 'h-96 mx-auto'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the Checkbox.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  color: gray
+  defaultValue: 50
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Checkbox.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  size: xl
+  defaultValue: 50
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Checkbox.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  disabled: true
+  defaultValue: 50
+---
+::
 
 ## API
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 558fbee5..e1c4863e 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -132,6 +132,7 @@ export default defineNuxtConfig({
         'UKbd',
         'ULink',
         'UProgress',
+        'USlider',
         'USwitch',
         'UTabs',
         'UTextarea',