add docs

docs/components/range/examples/DefaultRange.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <Range v-model="value" :steps="5" :size="lg" />
-    <Range v-model="value" :steps="5" :disabled="true" />
-    <Range v-model="value" :steps="5" size="sm" />
-    <Range v-model="value" :steps="5" size="md" />
-    <Range v-model="value" :steps="5" size="lg" />
-    {{ value }}
+    <Range v-model="value" />
   </div>
 </template>
 

docs/components/range/examples/DisabledRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Disabled range" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>

docs/components/range/examples/MinMaxRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>

docs/components/range/examples/SizeRange.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <Range v-model="value1" label="Small range" size="sm" />
+    <Range v-model="value2" label="Medium range" size="md" />
+    <Range v-model="value3" label="Large range" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value1 = ref(10)
+const value2 = ref(10)
+const value3 = ref(10)
+</script>

docs/components/range/examples/StepsRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Steps range" :steps="5" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>