Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
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>

​
With tooltip

<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

​
modelValue
number | number[]
The controlled value of the slider. Can be a single number or array for range.
​
min
number
default:"0"
The minimum value.
​
max
number
default:"100"
The maximum value.
​
step
number
default:"1"
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.
​
disabled
boolean
Disable the slider.
​
inverted
boolean
Invert the slider direction.

​
Events

​
update:modelValue
(value: number | number[]) => void
Emitted when the slider value changes.
​
change
(event: Event) => void
Emitted when the slider is changed.

Build docs developers (and LLMs) love

Get started for freeTalk to us