From 2bdfd9895ca9cb76879995e2a6d5b5d1fd41cd0f Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Sun, 18 Jun 2023 18:21:29 +0530
Subject: [PATCH 01/25] feat: range component

---
 docs/.vitepress/config.ts                     |  1 +
 docs/components/range.md                      | 13 +++++++
 .../range/examples/DefaultRange.vue           | 13 +++++++
 src/components/Range/Range.vue                | 39 +++++++++++++++++++
 .../Range/composables/useRangeClasses.ts      | 20 ++++++++++
 src/index.ts                                  |  2 +
 6 files changed, 88 insertions(+)
 create mode 100644 docs/components/range.md
 create mode 100644 docs/components/range/examples/DefaultRange.vue
 create mode 100644 src/components/Range/Range.vue
 create mode 100644 src/components/Range/composables/useRangeClasses.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b642668..701ea78 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -68,6 +68,7 @@ function getFormComponents() {
     { text: 'Checkbox', link: 'components/checkbox' },
     { text: 'Select', link: 'components/select' },
     { text: 'Toggle', link: 'components/toggle' },
+    { text: 'Range', link: 'components/range' },
   ]
 }
 
diff --git a/docs/components/range.md b/docs/components/range.md
new file mode 100644
index 0000000..479d530
--- /dev/null
+++ b/docs/components/range.md
@@ -0,0 +1,13 @@
+<script setup>
+import DefaultRange from './range/examples/DefaultRange.vue'
+</script>
+
+## Default
+
+```vue
+<template>
+  <Range />
+</template>
+```
+
+<DefaultRange />
diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
new file mode 100644
index 0000000..762bba4
--- /dev/null
+++ b/docs/components/range/examples/DefaultRange.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Range v-model="value" :steps="5" />
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
new file mode 100644
index 0000000..d345769
--- /dev/null
+++ b/src/components/Range/Range.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <label for="default-range" :class="labelClasses">Default range</label>
+    <input :step="steps" v-model="model" id="default-range" type="range" :class="rangeClasses">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRangeClasses } from './composables/useRangeClasses'
+
+interface RangeProps {
+  modelValue?: number;
+  label?: '';
+  disabled?: boolean;
+  size?: string;
+  steps?: number;
+}
+
+const props = withDefaults(defineProps<RangeProps>(), {
+  modelValue: 50,
+  label: '',
+  disabled: false,
+  size: 'md',
+  steps: 1,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { rangeClasses, labelClasses } = useRangeClasses()
+</script>
diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/Range/composables/useRangeClasses.ts
new file mode 100644
index 0000000..5df89f6
--- /dev/null
+++ b/src/components/Range/composables/useRangeClasses.ts
@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+// Range
+const rangeDefaultClasses = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700'
+const rangeLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+
+export function useRangeClasses() {
+  const rangeClasses = computed(() => {
+    return rangeDefaultClasses
+  })
+
+  const labelClasses = computed(() => {
+    return rangeLabelClasses
+  })
+
+  return {
+    rangeClasses,
+    labelClasses,
+  }
+} 
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 0ccb236..2d38517 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -58,4 +58,6 @@ export { default as Select } from './components/Select/Select.vue'
 
 export { default as Toggle } from './components/Toggle/Toggle.vue'
 
+export { default as Range } from './components/Range/Range.vue'
+
 export * from './composables'

From b17b71cd0e07f25b4f59369883a16689933f95be Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Sun, 18 Jun 2023 18:44:27 +0530
Subject: [PATCH 02/25] add props

---
 .../range/examples/DefaultRange.vue           |  6 +++++-
 src/components/Range/Range.vue                |  6 +++---
 .../Range/composables/useRangeClasses.ts      | 19 +++++++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
index 762bba4..4bb4e9a 100644
--- a/docs/components/range/examples/DefaultRange.vue
+++ b/docs/components/range/examples/DefaultRange.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Range v-model="value" :steps="5" />
+    <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 }}
   </div>
 </template>
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index d345769..088a365 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="default-range" :class="labelClasses">Default range</label>
-    <input :step="steps" v-model="model" id="default-range" type="range" :class="rangeClasses">
+    <input :step="steps" v-model="model" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useRangeClasses } from './composables/useRangeClasses'
 
 interface RangeProps {
@@ -35,5 +35,5 @@ const model = computed({
   },
 })
 
-const { rangeClasses, labelClasses } = useRangeClasses()
+const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
 </script>
diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/Range/composables/useRangeClasses.ts
index 5df89f6..e6615aa 100644
--- a/src/components/Range/composables/useRangeClasses.ts
+++ b/src/components/Range/composables/useRangeClasses.ts
@@ -1,12 +1,27 @@
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
 import { computed } from 'vue'
+import type { Ref } from 'vue'
+import type { InputSize } from '@/components/Input/types'
 
 // Range
 const rangeDefaultClasses = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700'
 const rangeLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
 
-export function useRangeClasses() {
+const rangeSizeClasses: Record<InputSize, string> = {
+  lg: 'h-3 range-lg',
+  md: 'h-2 range-md',
+  sm: 'h-1 range-sm',
+}
+
+export type UseRangeClassesProps = {
+  disabled: Ref<boolean>
+  size: Ref<InputSize>
+}
+
+export function useRangeClasses(props: UseRangeClassesProps) {
+  console.log(props.size.value)
   const rangeClasses = computed(() => {
-    return rangeDefaultClasses
+    return simplifyTailwindClasses(rangeDefaultClasses, rangeSizeClasses[props.size.value])
   })
 
   const labelClasses = computed(() => {

From a8f990395dc7ebde4189c2bbfa374538166a42d6 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Mon, 19 Jun 2023 19:33:05 +0530
Subject: [PATCH 03/25] add docs

---
 docs/components/range.md                      | 68 ++++++++++++++++++-
 .../range/examples/DefaultRange.vue           |  7 +-
 .../range/examples/DisabledRange.vue          | 12 ++++
 .../components/range/examples/MinMaxRange.vue | 12 ++++
 docs/components/range/examples/SizeRange.vue  | 16 +++++
 docs/components/range/examples/StepsRange.vue | 12 ++++
 src/components/Range/Range.vue                | 15 ++--
 .../Range/composables/useRangeClasses.ts      |  2 +-
 8 files changed, 131 insertions(+), 13 deletions(-)
 create mode 100644 docs/components/range/examples/DisabledRange.vue
 create mode 100644 docs/components/range/examples/MinMaxRange.vue
 create mode 100644 docs/components/range/examples/SizeRange.vue
 create mode 100644 docs/components/range/examples/StepsRange.vue

diff --git a/docs/components/range.md b/docs/components/range.md
index 479d530..3141fc8 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -1,13 +1,79 @@
 <script setup>
 import DefaultRange from './range/examples/DefaultRange.vue'
+import DisabledRange from './range/examples/DisabledRange.vue'
+import MinMaxRange from './range/examples/MinMaxRange.vue'
+import StepsRange from './range/examples/StepsRange.vue'
+import SizeRange from './range/examples/SizeRange.vue'
 </script>
 
+# Vue Toggle Range - Flowbite
+#### Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.com/docs/forms/range/)
+:::
+
 ## Default
 
 ```vue
 <template>
-  <Range />
+  <Range v-model="value" />
 </template>
+
+<script setup>
+import Range from 'flowbite-vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
+
 ```
 
 <DefaultRange />
+
+## Disabled state
+
+```vue
+<template>
+  <Range v-model="value" label="Disabled range" :disabled="true" />
+</template>
+</script>
+```
+
+<DisabledRange />
+
+## Min and Max
+
+```vue
+<template>
+  <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+</template>
+```
+
+<MinMaxRange />
+
+## Steps
+
+```vue
+<template>
+  <Range v-model="value"  label="Steps range" :steps="5" />
+</template>
+```
+
+<StepsRange />
+
+## Sizes
+
+```vue
+<template>
+  <div>
+    <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>
+```
+
+<SizeRange />
diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
index 4bb4e9a..a7e98ba 100644
--- a/docs/components/range/examples/DefaultRange.vue
+++ b/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>
 
diff --git a/docs/components/range/examples/DisabledRange.vue b/docs/components/range/examples/DisabledRange.vue
new file mode 100644
index 0000000..457fea4
--- /dev/null
+++ b/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>
diff --git a/docs/components/range/examples/MinMaxRange.vue b/docs/components/range/examples/MinMaxRange.vue
new file mode 100644
index 0000000..9274114
--- /dev/null
+++ b/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>
diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
new file mode 100644
index 0000000..edf2b5f
--- /dev/null
+++ b/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>
diff --git a/docs/components/range/examples/StepsRange.vue b/docs/components/range/examples/StepsRange.vue
new file mode 100644
index 0000000..8f5aef8
--- /dev/null
+++ b/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>
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 088a365..0f2917c 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -1,26 +1,31 @@
 <template>
   <div>
-    <label for="default-range" :class="labelClasses">Default range</label>
-    <input :step="steps" v-model="model" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
+    <label for="default-range" :class="labelClasses">{{ label }}</label>
+    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import { useRangeClasses } from './composables/useRangeClasses'
+import type { InputSize } from '@/components/Input/types'
 
 interface RangeProps {
   modelValue?: number;
-  label?: '';
+  label?: string;
   disabled?: boolean;
-  size?: string;
+  min?: number;
+  max?: number;
+  size?: InputSize;
   steps?: number;
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {
   modelValue: 50,
-  label: '',
+  label: 'Range slider',
   disabled: false,
+  min: 0,
+  max: 100,
   size: 'md',
   steps: 1,
 })
diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/Range/composables/useRangeClasses.ts
index e6615aa..f7372fc 100644
--- a/src/components/Range/composables/useRangeClasses.ts
+++ b/src/components/Range/composables/useRangeClasses.ts
@@ -14,8 +14,8 @@ const rangeSizeClasses: Record<InputSize, string> = {
 }
 
 export type UseRangeClassesProps = {
-  disabled: Ref<boolean>
   size: Ref<InputSize>
+  disabled: Ref<boolean>
 }
 
 export function useRangeClasses(props: UseRangeClassesProps) {

From 7881d1d7847eb80c5c44a9b2ab14849a4354330a Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:11 +0300
Subject: [PATCH 04/25] Update
 src/components/Range/composables/useRangeClasses.ts

---
 src/components/Range/composables/useRangeClasses.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/Range/composables/useRangeClasses.ts
index f7372fc..c797e94 100644
--- a/src/components/Range/composables/useRangeClasses.ts
+++ b/src/components/Range/composables/useRangeClasses.ts
@@ -19,7 +19,6 @@ export type UseRangeClassesProps = {
 }
 
 export function useRangeClasses(props: UseRangeClassesProps) {
-  console.log(props.size.value)
   const rangeClasses = computed(() => {
     return simplifyTailwindClasses(rangeDefaultClasses, rangeSizeClasses[props.size.value])
   })

From 470c0b331d58031ef819f619dd842fa56269f52c Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:18 +0300
Subject: [PATCH 05/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 0f2917c..2f61e47 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -11,7 +11,7 @@ import { useRangeClasses } from './composables/useRangeClasses'
 import type { InputSize } from '@/components/Input/types'
 
 interface RangeProps {
-  modelValue?: number;
+  modelValue?: string;
   label?: string;
   disabled?: boolean;
   min?: number;

From 66a46aa237faaff65ddcd45224e743bbbe18a67f Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:24 +0300
Subject: [PATCH 06/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 2f61e47..6dc46a6 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -14,7 +14,7 @@ interface RangeProps {
   modelValue?: string;
   label?: string;
   disabled?: boolean;
-  min?: number;
+  min?: string;
   max?: number;
   size?: InputSize;
   steps?: number;

From 1a112d8e818fbd339a6f0f7a5c27879ce7aa54a7 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:29 +0300
Subject: [PATCH 07/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 6dc46a6..026ac3c 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -15,7 +15,7 @@ interface RangeProps {
   label?: string;
   disabled?: boolean;
   min?: string;
-  max?: number;
+  max?: string;
   size?: InputSize;
   steps?: number;
 }

From 59ccab2d47ba644fef9d9fede8a185e5508945c9 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:33 +0300
Subject: [PATCH 08/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 026ac3c..362ca93 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -17,7 +17,7 @@ interface RangeProps {
   min?: string;
   max?: string;
   size?: InputSize;
-  steps?: number;
+  steps?: string;
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {

From de1eb3668e1a8f8217bb2e6b3d369c8ecd6ead74 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:43 +0300
Subject: [PATCH 09/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 362ca93..2988769 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -21,7 +21,7 @@ interface RangeProps {
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {
-  modelValue: 50,
+  modelValue: '50',
   label: 'Range slider',
   disabled: false,
   min: 0,

From 08a2f849cb548cfcbe8dea57a232b72a4e0675ac Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:49 +0300
Subject: [PATCH 10/25] Update docs/components/range/examples/DisabledRange.vue

---
 docs/components/range/examples/DisabledRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/DisabledRange.vue b/docs/components/range/examples/DisabledRange.vue
index 457fea4..5f6fff4 100644
--- a/docs/components/range/examples/DisabledRange.vue
+++ b/docs/components/range/examples/DisabledRange.vue
@@ -8,5 +8,5 @@
 import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
-const value = ref(10)
+const value = ref('10')
 </script>

From 3d52fe622a76043edc01b9e71a402ea6db42f028 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:18:56 +0300
Subject: [PATCH 11/25] Update docs/components/range/examples/DefaultRange.vue

---
 docs/components/range/examples/DefaultRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
index a7e98ba..f7baf2b 100644
--- a/docs/components/range/examples/DefaultRange.vue
+++ b/docs/components/range/examples/DefaultRange.vue
@@ -8,5 +8,5 @@
 import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
-const value = ref(10)
+const value = ref('10')
 </script>

From 5c2556653a46e34415a99f209306e69b97832f10 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:02 +0300
Subject: [PATCH 12/25] Update docs/components/range.md

---
 docs/components/range.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range.md b/docs/components/range.md
index 3141fc8..266dda5 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -58,7 +58,7 @@ const value = ref(10)
 
 ```vue
 <template>
-  <Range v-model="value"  label="Steps range" :steps="5" />
+  <Range v-model="value"  label="Steps range" steps="5" />
 </template>
 ```
 

From 3b8830b6b8941981d8f2f3da43367d7aa00384e1 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:09 +0300
Subject: [PATCH 13/25] Update docs/components/range.md

---
 docs/components/range.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range.md b/docs/components/range.md
index 266dda5..de8dc08 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -26,7 +26,7 @@ Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.co
 import Range from 'flowbite-vue'
 import { ref } from 'vue'
 
-const value = ref(10)
+const value = ref('10')
 </script>
 
 ```

From 32ca724e32a02bed4e63856990ed0edba5a19372 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:15 +0300
Subject: [PATCH 14/25] Update docs/components/range.md

---
 docs/components/range.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range.md b/docs/components/range.md
index de8dc08..d1d4fdf 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -48,7 +48,7 @@ const value = ref('10')
 
 ```vue
 <template>
-  <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+  <Range v-model="value" label="Min-max range" min="0" max="10" />
 </template>
 ```
 

From 3c067987ce6cc456717308d088aaa8d5cdcdb0e4 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:25 +0300
Subject: [PATCH 15/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 2988769..b907900 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<RangeProps>(), {
   modelValue: '50',
   label: 'Range slider',
   disabled: false,
-  min: 0,
+  min: '0',
   max: 100,
   size: 'md',
   steps: 1,

From 7cb762d042afc9d718697d614ddb52debf836a12 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:35 +0300
Subject: [PATCH 16/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index b907900..7ea69d7 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<RangeProps>(), {
   label: 'Range slider',
   disabled: false,
   min: '0',
-  max: 100,
+  max: '100',
   size: 'md',
   steps: 1,
 })

From 9984b003ed4bc3e945aa131d1027fc1da04e877f Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:44 +0300
Subject: [PATCH 17/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 7ea69d7..38a000f 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<RangeProps>(), {
   min: '0',
   max: '100',
   size: 'md',
-  steps: 1,
+  steps: '1',
 })
 
 const emit = defineEmits(['update:modelValue'])

From e56653acad7bc963987192e23912a00018069e23 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:19:53 +0300
Subject: [PATCH 18/25] Update src/components/Range/Range.vue

---
 src/components/Range/Range.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 38a000f..4c0caf4 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label for="default-range" :class="labelClasses">{{ label }}</label>
-    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
+    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="rangeClasses">
   </div>
 </template>
 

From 2d2694975cc14057eedcb83b8e6b39a294ecf903 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:02 +0300
Subject: [PATCH 19/25] Update docs/components/range/examples/StepsRange.vue

---
 docs/components/range/examples/StepsRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/StepsRange.vue b/docs/components/range/examples/StepsRange.vue
index 8f5aef8..f136330 100644
--- a/docs/components/range/examples/StepsRange.vue
+++ b/docs/components/range/examples/StepsRange.vue
@@ -8,5 +8,5 @@
 import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
-const value = ref(10)
+const value = ref('10')
 </script>

From c9909ab43ce58632228b4acf350ba36a88dffbe0 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:12 +0300
Subject: [PATCH 20/25] Update docs/components/range/examples/StepsRange.vue

---
 docs/components/range/examples/StepsRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/StepsRange.vue b/docs/components/range/examples/StepsRange.vue
index f136330..9d85db6 100644
--- a/docs/components/range/examples/StepsRange.vue
+++ b/docs/components/range/examples/StepsRange.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Range v-model="value" label="Steps range" :steps="5" />
+    <Range v-model="value" label="Steps range" steps="5" />
   </div>
 </template>
 

From eed747b60b0e34a4db654e0d09834f09dfbefca6 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:21 +0300
Subject: [PATCH 21/25] Update docs/components/range/examples/SizeRange.vue

---
 docs/components/range/examples/SizeRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
index edf2b5f..9689e7e 100644
--- a/docs/components/range/examples/SizeRange.vue
+++ b/docs/components/range/examples/SizeRange.vue
@@ -12,5 +12,5 @@ import { ref } from 'vue'
 
 const value1 = ref(10)
 const value2 = ref(10)
-const value3 = ref(10)
+const value3 = ref('10')
 </script>

From c86363a84c197e099b39e6b300e58e87719517b5 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:31 +0300
Subject: [PATCH 22/25] Update docs/components/range/examples/SizeRange.vue

---
 docs/components/range/examples/SizeRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
index 9689e7e..d7bc83a 100644
--- a/docs/components/range/examples/SizeRange.vue
+++ b/docs/components/range/examples/SizeRange.vue
@@ -11,6 +11,6 @@ import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
 const value1 = ref(10)
-const value2 = ref(10)
+const value2 = ref('10')
 const value3 = ref('10')
 </script>

From 0f47839471e314ec1341f28761abcd1618b12df7 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:38 +0300
Subject: [PATCH 23/25] Update docs/components/range/examples/SizeRange.vue

---
 docs/components/range/examples/SizeRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
index d7bc83a..5174030 100644
--- a/docs/components/range/examples/SizeRange.vue
+++ b/docs/components/range/examples/SizeRange.vue
@@ -10,7 +10,7 @@
 import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
-const value1 = ref(10)
+const value1 = ref('10')
 const value2 = ref('10')
 const value3 = ref('10')
 </script>

From 2fcd1678077718d25c6ef174eabe01a7ea44a82a Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:46 +0300
Subject: [PATCH 24/25] Update docs/components/range/examples/MinMaxRange.vue

---
 docs/components/range/examples/MinMaxRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/MinMaxRange.vue b/docs/components/range/examples/MinMaxRange.vue
index 9274114..0bfee60 100644
--- a/docs/components/range/examples/MinMaxRange.vue
+++ b/docs/components/range/examples/MinMaxRange.vue
@@ -8,5 +8,5 @@
 import Range from '../../../../src/components/Range/Range.vue'
 import { ref } from 'vue'
 
-const value = ref(10)
+const value = ref('10')
 </script>

From 7abab9e946380822a62c5570cf6bec9f2fcaa94d Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Wed, 28 Jun 2023 19:20:57 +0300
Subject: [PATCH 25/25] Update docs/components/range/examples/MinMaxRange.vue

---
 docs/components/range/examples/MinMaxRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/range/examples/MinMaxRange.vue b/docs/components/range/examples/MinMaxRange.vue
index 0bfee60..c01eda4 100644
--- a/docs/components/range/examples/MinMaxRange.vue
+++ b/docs/components/range/examples/MinMaxRange.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+    <Range v-model="value" label="Min-max range" min="0" max="10" />
   </div>
 </template>