Slider

Slider with spring-curve thumb drag. Tooltip appears on focus/drag, supports keyboard precision stepping.

Basic Usage

Value: 40

<script setup>
import { ref } from 'vue'
const value = ref(40)
</script>

<template>
  <ASlider v-model="value" />
</template>

Custom Range & Step

Value: 50

<ASlider v-model="value" :min="0" :max="200" :step="10" />

Decimal Step

Supports arbitrary steps with precision rounding to avoid floating-point drift.

Value: 0.4

<ASlider v-model="value" :min="0" :max="1" :step="0.1" />

Tooltip Formatting

<ASlider v-model="value" :format-tooltip="v => `${v}%`" />

Size / Disabled

<ASlider v-model="value" size="sm" />
<ASlider v-model="value" size="md" />
<ASlider v-model="value" disabled />

API

Props

Name	Type	Default	Description
modelValue	number	0	Current value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step, supports decimals
disabled	boolean	false	Disabled
size	'sm' | 'md'	'md'	Size
tooltip	boolean	true	Show tooltip
formatTooltip	(value) => string | number	—	Custom tooltip content

Emits

Name	Parameters	Description
update:modelValue	value	Triggered continuously on drag/step
change	value	Triggered on drag end or keyboard step

Keyboard Interaction

Key	Behavior
← / ↓	Decrease by 1 step
→ / ↑	Increase by 1 step
Shift + Arrow	Step × 10
Home	Jump to minimum
End	Jump to maximum

Accessibility

• Thumb uses role="slider" with aria-valuemin / aria-valuemax / aria-valuenow / aria-orientation
• tabindex set to -1 when disabled, focus ring follows global :focus-visible
• Screen reader announces current value