Slider

Headless slider for single-value and range inputs with pointer drag, keyboard navigation, and step snapping.

Usage

The Slider supports single-value and range modes. Add one Slider.Thumb for a single value, or two for a range.

Anatomy

<script setup lang="ts">
  import { Slider } from '@vuetify/v0'
</script>

<template>
  <!-- Single thumb -->
  <Slider.Root>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />
  </Slider.Root>

  <!-- Range (two thumbs) -->
  <Slider.Root>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />
    <Slider.Thumb />
  </Slider.Root>

  <!-- With form submission -->
  <Slider.Root>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />

    <Slider.HiddenInput />
  </Slider.Root>
</template>

Architecture

The Root component composes createSlider for pointer/keyboard interaction and createModel for value storage. Each Thumb registers via a ticket and receives its position as a percentage.

The Root creates a slider instance and provides it via context. Track listens for pointer events to update the nearest thumb. Each Thumb registers itself and manages drag/keyboard interaction for its value. Range renders the filled region between thumbs (or from min to a single thumb).

Examples

Recipes

Form Integration

Set name on Root to auto-render hidden inputs for form submission — one per thumb:

<template>
  <Slider.Root name="price" :min="0" :max="1000">
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />
  </Slider.Root>
</template>

Drag Events

Root emits start and end for pointer drag lifecycle:

<template>
  <Slider.Root
    v-model="value"
    @start="onStart"
    @end="onEnd"
  >
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />
  </Slider.Root>
</template>

Data Attributes

Style interactive states without slot props:

<template>
  <Slider.Thumb class="data-[state=dragging]:scale-125 transition-transform" />
</template>

Accessibility

Each Slider.Thumb manages its own ARIA attributes automatically.

ARIA Attributes

Keyboard Navigation