Slider

Form

A range slider with a filled track, thumb, and optional value display.

Props

Prop	Type	Default	Description
`modelValue`	`number`	`50`	Current value (v-model).
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`label`	`string`	—	Label shown above the track.
`showValue`	`boolean`	`true`	Show current value.
`disabled`	`boolean`	`false`	Disable interaction.

Examples

Interactive

Volume40

0100

vue

<script setup lang="ts">
const volume = ref(40)
</script>
<template>
  <DsSlider v-model="volume" label="Volume" :min="0" :max="100" class="w-72" />
</template>

Disabled

Brightness60

0100

Skeleton

Use DsSliderSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsSliderSkeleton />

No label

vue

<DsSliderSkeleton :showLabel="false" />

Accessibility

Uses native <input type="range"> for full keyboard and AT support.
Label and value are visible for screen readers.

Select

Switch