Slider

A track and one or more thumbs, for a number whose bounds are known in advance.

Slider picks a number, or a range of them, from a bounded interval, with one thumb per value. Useful when the bounds matter more than the exact figure; where the user needs to type a precise number, use Input.

Volume60

App.vue

<template>
  <Slider.Root
    v-model="volume"
    class="w-64"
    :options="{ min: 0, max: 100, step: 1, largeStep: 10 }"
  >
    <div class="mb-3 flex items-baseline justify-between">
      <span class="type-component-lg text-primary-solid">Volume</span>
      <Slider.Value
        class="type-component-sm -number text-primary-muted tabular-nums"
      />
    </div>

    <Slider.Control
      class="flex h-8 w-full items-center px-[0.46875rem] [--mirror-slider-cursor:grab]"
    >
      <Slider.Track
        class="rounded-component-round bg-primary-subtle data-[disabled=true]:bg-disabled-subtle w-full transition-all duration-100 ease-linear"
      >
        <Slider.Indicator
          class="rounded-component-round bg-primary-solid data-[disabled=true]:bg-disabled-solid transition-colors duration-100 ease-linear"
        />
      </Slider.Track>

      <Slider.Thumb
        aria-label="Volume"
        class="group/thumb absolute [--mirror-slider-thumb-size:0.9375rem] focus-visible:outline-none"
      >
        <span
          class="rounded-component-lg bg-primary-solid group-data-[disabled=true]/thumb:bg-disabled-solid absolute top-1/2 left-1/2 size-[0.9375rem] -translate-x-1/2 -translate-y-1/2 outline-4 outline-transparent transition-all duration-100 ease-linear group-focus-visible/thumb:outline-4 group-focus-visible/thumb:outline-[color:var(--app-color-focus-outline)] group-data-[dragging=true]/thumb:size-[1.0625rem] group-data-[dragging=true]/thumb:outline-none!"
        />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@maas/mirror/vue/Slider'

const volume = ref(60)
</script>

Show code

Usage guidelines

The positioning math reads --mirror-slider-thumb-size, so size the thumb with that variable; a width alone leaves both ends off by half a thumb.must
An array value is clamped and sorted ascending before anything derives from it, so a model that arrives out of order still renders on the track.may
Make sure the slider has a label, either through a Label inside a Field or an aria-label on each thumb. A range slider names its two thumbs “start range” and “end range” on top of that.must