diff --git a/playground/app.vue b/playground/app.vue
index 3bcad594..3b056780 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -33,6 +33,7 @@ const components = [
   'separator',
   'skeleton',
   'slideover',
+  'slider',
   'switch',
   'tabs',
   'textarea',
diff --git a/playground/components/FormElementsExample.vue b/playground/components/FormElementsExample.vue
index e3fd8d40..17fcadac 100644
--- a/playground/components/FormElementsExample.vue
+++ b/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
diff --git a/playground/pages/slider.vue b/playground/pages/slider.vue
new file mode 100644
index 00000000..c70dd6dc
--- /dev/null
+++ b/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>
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 9ee6d390..3c42b430 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -39,9 +39,9 @@ export interface RadioGroupSlots<T> {
 
 <script setup lang="ts" generic="T extends string | undefined">
 import { computed } from 'vue'
-import { useId, useFormField } from '#imports'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { useId, useFormField } from '#imports'
 
 const props = defineProps<RadioGroupProps<T>>()
 const emits = defineEmits<RadioGroupEmits>()
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
new file mode 100644
index 00000000..5d4f0f9f
--- /dev/null
+++ b/src/runtime/components/Slider.vue
@@ -0,0 +1,91 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SliderRootProps, SliderRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slider'
+
+const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+
+const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends Omit<SliderRootProps, 'asChild' | 'defaultValue' | 'dir'> {
+  size?: SliderVariants['size']
+  color?: SliderVariants['color']
+  defaultValue?: number | number[]
+  class?: any
+  ui?: Partial<typeof slider.slots>
+}
+
+export interface SliderEmits extends Omit<SliderRootEmits, 'update:modelValue'> {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '#imports'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<SliderEmits>()
+
+const modelValue = defineModel<number | number[]>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+
+const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number') {
+    return [props.defaultValue]
+  }
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number') {
+      return [modelValue.value]
+    }
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length !== 1 ? value : value[0]
+  }
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const ui = computed(() => tv({ extend: slider, slots: props.ui })({
+  disabled: disabled.value,
+  size: size.value,
+  color: color.value,
+  orientation: props.orientation
+}))
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    :id="inputId"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: props.class })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormChange()"
+  >
+    <SliderTrack :class="ui.track()">
+      <SliderRange :class="ui.range()" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb()" />
+  </SliderRoot>
+</template>
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 07c6b65c..d216ce9f 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -24,6 +24,7 @@ export * from '../components/RadioGroup.vue'
 export * from '../components/Separator.vue'
 export * from '../components/Skeleton.vue'
 export * from '../components/Slideover.vue'
+export * from '../components/Slider.vue'
 export * from '../components/Switch.vue'
 export * from '../components/Tabs.vue'
 export * from '../components/Textarea.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 44bf620a..8a7281a1 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -22,6 +22,7 @@ export { default as radioGroup } from './radio-group'
 export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
+export { default as slider } from './slider'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
diff --git a/src/theme/slider.ts b/src/theme/slider.ts
new file mode 100644
index 00000000..515e28ae
--- /dev/null
+++ b/src/theme/slider.ts
@@ -0,0 +1,138 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative flex items-center select-none touch-none',
+    track: 'relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow',
+    range: 'absolute rounded-full',
+    thumb: 'rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+      range: `bg-${color}-500 dark:bg-${color}-400`,
+      thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
+    }])),
+    size: {
+      '2xs': {
+        thumb: 'size-1.5'
+      },
+      'xs': {
+        thumb: 'size-2'
+      },
+      'sm': {
+        thumb: 'size-3'
+      },
+      'md': {
+        thumb: 'size-4'
+      },
+      'lg': {
+        thumb: 'size-5'
+      },
+      'xl': {
+        thumb: 'size-6'
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: 'w-full',
+        range: 'h-full'
+      },
+      vertical: {
+        root: 'flex-col h-full',
+        range: 'w-full'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-75 cursor-not-allowed'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    size: '2xs',
+    class: {
+      root: 'h-1.5',
+      track: 'h-px'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'xs',
+    class: {
+      root: 'h-2',
+      track: 'h-0.5'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'sm',
+    class: {
+      root: 'h-3',
+      track: 'h-1'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'md',
+    class: {
+      root: 'h-4',
+      track: 'h-2'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'lg',
+    class: {
+      root: 'h-5',
+      track: 'h-3'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'xl',
+    class: {
+      root: 'h-6',
+      track: 'h-4'
+    }
+  }, {
+    orientation: 'vertical',
+    size: '2xs',
+    class: {
+      root: 'w-1.5',
+      track: 'w-px'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'xs',
+    class: {
+      root: 'w-2',
+      track: 'w-0.5'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'sm',
+    class: {
+      root: 'w-3',
+      track: 'w-1'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'md',
+    class: {
+      root: 'w-4',
+      track: 'w-2'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'lg',
+    class: {
+      root: 'w-5',
+      track: 'w-3'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'xl',
+    class: {
+      root: 'w-6',
+      track: 'w-4'
+    }
+  }],
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary'
+  }
+})
diff --git a/test/components/Slider.spec.ts b/test/components/Slider.spec.ts
new file mode 100644
index 00000000..59c29d32
--- /dev/null
+++ b/test/components/Slider.spec.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import Slider, { type SliderProps } from '../../src/runtime/components/Slider.vue'
+import ComponentRender from '../component-render'
+
+describe('Slider', () => {
+  it.each([
+    ['basic case', {}],
+    ['with class', { props: { class: 'w-48' } }],
+    ['with ui', { props: { ui: { track: 'bg-gray-100 dark:bg-gray-800' } } }],
+    ['with defaultValue', { props: { defaultValue: 10 } }],
+    ['with multiple thumbs', { props: { defaultValue: [0, 10] } }],
+    ['with name', { props: { name: 'custom-name' } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with inverted', { props: { inverted: true } }],
+    ['with orientation', { props: { orientation: 'vertical' as const } }],
+    ['with min max step', { props: { min: 4, max: 12, step: 2 } }],
+    ['with min steps between thumbs', { props: { defaultValue: [0, 30], minStepsBetweenThumbs: 30 } }],
+    ['with color', { props: { color: 'red' as const } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
+    ['with size xs', { props: { size: 'xs' as const } }],
+    ['with size sm', { props: { size: 'sm' as const } }],
+    ['with size md', { props: { size: 'md' as const } }],
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Slider)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/Slider.spec.ts.snap b/test/components/__snapshots__/Slider.spec.ts.snap
new file mode 100644
index 00000000..712694c5
--- /dev/null
+++ b/test/components/__snapshots__/Slider.spec.ts.snap
@@ -0,0 +1,111 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Slider > renders basic case correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with class correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none h-3 w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with color correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-red-500 dark:bg-red-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-red-500 dark:ring-red-400 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with defaultValue correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-valuenow="10"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with disabled correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed h-3" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with inverted correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with min max step correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with min steps between thumbs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" aria-label="Maximum" aria-valuenow="30"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with multiple thumbs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" aria-label="Maximum" aria-valuenow="10"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with name correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with orientation correctly 1`] = `
+"<span data-slider-impl="" data-orientation="vertical" style="--radix-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full w-3" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow w-1"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 w-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--radix-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size 2xs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-1.5" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-px"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-1.5" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size lg correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-5" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-3"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-5" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size md correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-4" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-2"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-4" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size sm correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size xl correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-6" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-4"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-6" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with size xs correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-2" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow h-0.5"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-2" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;
+
+exports[`Slider > renders with ui correctly 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--radix-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full h-3" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow bg-gray-100 dark:bg-gray-800 h-1"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary-500 dark:bg-primary-400 h-full"></span></span>
+<div class="rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50 size-3" role="slider" data-radix-vue-collection-item="" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></div></span>
+<!---->"
+`;