Slider ​

A number picked by dragging, when the feel of the value matters more than its exact digits: a volume, a radius, an opacity. For an exact number use an input.

<script setup lang="ts">
import { ref } from 'vue'

const radius = ref(14)
</script>

<template>
  <span>Radius · {{ radius }}px</span>
  <OSlider v-model="radius" :max="24" aria-label="Radius" />
</template>

The arrow keys move the thumb by one step, Page Up and Page Down by a larger one, Home and End go to the ends. The slider does not print its value: show it next to the label, as above.

Give it an aria-label: it goes to the thumb, which is the control a screen reader meets.

Step ​

step is the distance between two values the thumb can stop at.

<OSlider v-model="glass" :min="10" :max="70" :step="5" aria-label="Glass darkness" />

Disabled ​

<OSlider v-model="volume" disabled aria-label="Volume" />

Props ​

class and style go to the slider; other attributes (aria-label, name) go to the thumb.

Built on Reka UI Slider.