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'