A value picked from a range, where roughly right is the point.
Import it from rei-kit:
import { BaseSlider } from 'rei-kit'
Open BaseSlider in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseSlider } from 'rei-kit'
const goal = ref(20)
</script>
<template>
<BaseSlider v-model="goal" label="Daily goal" :min="5" :max="60" :step="5" show-value />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | |
min | number | 0 | |
max | number | 100 | |
step | number | 1 | |
hint | string | '' | |
disabled | boolean | false | |
format | ((value: number) => string) | Turns the number into something a person would say — "45 minutes", "₺12". Used for the visible readout and for `aria-valuetext`, so both say the same thing and neither is a bare number. | |
showValue | boolean | true |
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.