Components

Slider

An input to select a numeric value within a range.

Usage

Use the v-model directive to control the value of the Slider.

modelValue

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <USlider v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <USlider :default-value="50" />
</template>

Min / Max

Use the min and max props to set the minimum and maximum values of the Slider. Defaults to 0 and 100.

min

max

<template>
  <USlider :min="0" :max="50" :default-value="50" />
</template>

Step

Use the step prop to set the increment value of the Slider. Defaults to 1.

step

<template>
  <USlider :step="10" :default-value="50" />
</template>

Multiple

Use the v-model directive or the default-value prop with an array of values to create a range Slider.

<script setup lang="ts">
const value = ref([
  25,
  75
])
</script>

<template>
  <USlider v-model="value" />
</template>

Use the min-steps-between-thumbs prop to limit the minimum distance between the thumbs.

minStepsBetweenThumbs

<script setup lang="ts">
const value = ref([
  25,
  50,
  75
])
</script>

<template>
  <USlider v-model="value" :min-steps-between-thumbs="10" />
</template>

Orientation

Use the orientation prop to change the orientation of the Slider. Defaults to horizontal.

orientation

<template>
  <USlider orientation="vertical" :default-value="50" class="h-48" />
</template>

Color

Use the color prop to change the color of the Slider.

color

<template>
  <USlider color="gray" :default-value="50" />
</template>

Size

Use the size prop to change the size of the Slider.

size

<template>
  <USlider size="xl" :default-value="50" />
</template>

Disabled

Use the disabled prop to disable the Slider.

disabled

<template>
  <USlider disabled :default-value="50" />
</template>

Inverted

Use the inverted prop to visually invert the Slider.

inverted

<template>
  <USlider inverted :default-value="25" />
</template>

API

Props

Prop	Default	Type
`as`	`div`	`any` The element or component this component should render as.
`modelValue`		`number \| number[]`
`size`	`md`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`primary`	`"error" \| "primary" \| "red" \| "orange" \| "amber" \| "yellow" \| "lime" \| "green" \| "emerald" \| "teal" \| "cyan" \| "sky" \| "blue" \| "indigo" \| "violet" \| "purple" \| "fuchsia" \| "pink" \| "rose" \| "gray"`
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider.
`defaultValue`		`number \| number[]` The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`disabled`		`boolean` When `true`, prevents the user from interacting with the slider.
`step`	`1`	`number` The stepping interval.
`max`	`100`	`number` The maximum value for the range.
`name`		`string`
`inverted`		`boolean` Whether the slider is visually inverted.
`min`	`0`	`number` The minimum value for the range.
`minStepsBetweenThumbs`		`number` The minimum permitted steps between multiple thumbs.
`ui`		`Partial<{ root: string; track: string; range: string; thumb: string; }>`

Emits

Event	Type
`change`	`[payload: Event]`
`update:modelValue`	`[modelValue: number \| number[]]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    slider: {
      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: {
          primary: {
            range: 'bg-primary-500 dark:bg-primary-400',
            thumb: 'ring-primary-500 dark:ring-primary-400 focus-visible:outline-primary-500/50 dark:focus-visible:outline-primary-400/50'
          },
          error: {
            range: 'bg-error-500 dark:bg-error-400',
            thumb: 'ring-error-500 dark:ring-error-400 focus-visible:outline-error-500/50 dark:focus-visible:outline-error-400/50'
          },
          red: {
            range: 'bg-red-500 dark:bg-red-400',
            thumb: 'ring-red-500 dark:ring-red-400 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-400/50'
          },
          orange: {
            range: 'bg-orange-500 dark:bg-orange-400',
            thumb: 'ring-orange-500 dark:ring-orange-400 focus-visible:outline-orange-500/50 dark:focus-visible:outline-orange-400/50'
          },
          amber: {
            range: 'bg-amber-500 dark:bg-amber-400',
            thumb: 'ring-amber-500 dark:ring-amber-400 focus-visible:outline-amber-500/50 dark:focus-visible:outline-amber-400/50'
          },
          yellow: {
            range: 'bg-yellow-500 dark:bg-yellow-400',
            thumb: 'ring-yellow-500 dark:ring-yellow-400 focus-visible:outline-yellow-500/50 dark:focus-visible:outline-yellow-400/50'
          },
          lime: {
            range: 'bg-lime-500 dark:bg-lime-400',
            thumb: 'ring-lime-500 dark:ring-lime-400 focus-visible:outline-lime-500/50 dark:focus-visible:outline-lime-400/50'
          },
          green: {
            range: 'bg-green-500 dark:bg-green-400',
            thumb: 'ring-green-500 dark:ring-green-400 focus-visible:outline-green-500/50 dark:focus-visible:outline-green-400/50'
          },
          emerald: {
            range: 'bg-emerald-500 dark:bg-emerald-400',
            thumb: 'ring-emerald-500 dark:ring-emerald-400 focus-visible:outline-emerald-500/50 dark:focus-visible:outline-emerald-400/50'
          },
          teal: {
            range: 'bg-teal-500 dark:bg-teal-400',
            thumb: 'ring-teal-500 dark:ring-teal-400 focus-visible:outline-teal-500/50 dark:focus-visible:outline-teal-400/50'
          },
          cyan: {
            range: 'bg-cyan-500 dark:bg-cyan-400',
            thumb: 'ring-cyan-500 dark:ring-cyan-400 focus-visible:outline-cyan-500/50 dark:focus-visible:outline-cyan-400/50'
          },
          sky: {
            range: 'bg-sky-500 dark:bg-sky-400',
            thumb: 'ring-sky-500 dark:ring-sky-400 focus-visible:outline-sky-500/50 dark:focus-visible:outline-sky-400/50'
          },
          blue: {
            range: 'bg-blue-500 dark:bg-blue-400',
            thumb: 'ring-blue-500 dark:ring-blue-400 focus-visible:outline-blue-500/50 dark:focus-visible:outline-blue-400/50'
          },
          indigo: {
            range: 'bg-indigo-500 dark:bg-indigo-400',
            thumb: 'ring-indigo-500 dark:ring-indigo-400 focus-visible:outline-indigo-500/50 dark:focus-visible:outline-indigo-400/50'
          },
          violet: {
            range: 'bg-violet-500 dark:bg-violet-400',
            thumb: 'ring-violet-500 dark:ring-violet-400 focus-visible:outline-violet-500/50 dark:focus-visible:outline-violet-400/50'
          },
          purple: {
            range: 'bg-purple-500 dark:bg-purple-400',
            thumb: 'ring-purple-500 dark:ring-purple-400 focus-visible:outline-purple-500/50 dark:focus-visible:outline-purple-400/50'
          },
          fuchsia: {
            range: 'bg-fuchsia-500 dark:bg-fuchsia-400',
            thumb: 'ring-fuchsia-500 dark:ring-fuchsia-400 focus-visible:outline-fuchsia-500/50 dark:focus-visible:outline-fuchsia-400/50'
          },
          pink: {
            range: 'bg-pink-500 dark:bg-pink-400',
            thumb: 'ring-pink-500 dark:ring-pink-400 focus-visible:outline-pink-500/50 dark:focus-visible:outline-pink-400/50'
          },
          rose: {
            range: 'bg-rose-500 dark:bg-rose-400',
            thumb: 'ring-rose-500 dark:ring-rose-400 focus-visible:outline-rose-500/50 dark:focus-visible:outline-rose-400/50'
          },
          gray: {
            range: 'bg-gray-900 dark:bg-white',
            thumb: 'ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50'
          }
        },
        size: {
          xs: {
            thumb: 'size-3'
          },
          sm: {
            thumb: 'size-3.5'
          },
          md: {
            thumb: 'size-4'
          },
          lg: {
            thumb: 'size-4.5'
          },
          xl: {
            thumb: 'size-5'
          }
        },
        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: 'xs',
          class: {
            track: 'h-[6px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            track: 'h-[7px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            track: 'h-[8px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            track: 'h-[9px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            track: 'h-[10px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            track: 'w-[6px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            track: 'w-[7px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            track: 'w-[8px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            track: 'w-[9px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            track: 'w-[10px]'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
})

Slideover

A dialog that slides in from any side of the screen.

Switch

A control that toggles between two states.