SliderField

One number, reached either way: dragged along a range or typed exactly.

Import it from rei-kit: import { SliderField } from 'rei-kit'

Open SliderField in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { SliderField } from 'rei-kit'

const opacity = ref(40)
</script>

<template>
  <SliderField
    v-model="opacity"
    label="Opacity"
    :min="0"
    :max="100"
    :step="5"
    decrement-label="Less opaque"
    increment-label="More opaque"
    :format="(value) => `${value}%`"
    hint="Drag for roughly right, type for exactly right."
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes	Names both controls. Already translated.
`min`	`number`	0
`max`	`number`	100
`step`	`number`	1
`decrementLabel`	`string`	yes	Names the number field's step-down button. Already translated.
`incrementLabel`	`string`	yes	Names the number field's step-up button. Already translated.
`hint`	`string`	''
`disabled`	`boolean`	false
`format`	`((value: number) => string)`		Turns the number into something a person would say — "45 minutes", "₺12". The slider's readout is the number field here, so this is only what a screen reader hears for the slider: `aria-valuetext`, which without it is a bare number and a bare number is not an answer to anything.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub