Overview
The Slider component allows users to select a value or range of values by moving a slider thumb along a track. Built on Reka UI’s Slider primitive.
Basic usage
<template>
<USlider v-model="value" :min="0" :max="100" />
</template>
<script setup lang="ts">
const value = ref(50)
</script>
Range slider
<template>
<USlider v-model="range" :min="0" :max="100" />
</template>
<script setup lang="ts">
const range = ref([25, 75])
</script>
<template>
<USlider v-model="value" tooltip />
</template>
Vertical orientation
<template>
<USlider v-model="value" orientation="vertical" />
</template>
With step
<template>
<USlider v-model="value" :min="0" :max="100" :step="10" />
</template>
Props
The controlled value of the slider. Can be a single number or array for range.
The increment between values.
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the slider.
color
string
default:"'primary'"
The color of the slider.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size of the slider.
tooltip
boolean | TooltipProps
default:"false"
Show tooltip with current value on thumbs.
Invert the slider direction.
Events
update:modelValue
(value: number | number[]) => void
Emitted when the slider value changes.
Emitted when the slider is changed.