Slider 滑块
Thumb 在 spring 曲线下拖动,tooltip 随焦点 / 拖动浮现,支持键盘精确步进。
基础用法
当前值: 40
vue
<script setup>
import { ref } from 'vue'
const value = ref(40)
</script>
<template>
<ASlider v-model="value" />
</template>自定义范围与步长
当前值: 50
vue
<ASlider v-model="value" :min="0" :max="200" :step="10" />小数步长
支持任意 step,组件会按精度做四舍五入,避免浮点漂移。
当前值: 0.4
vue
<ASlider v-model="value" :min="0" :max="1" :step="0.1" />Tooltip 格式化
vue
<ASlider v-model="value" :format-tooltip="v => `${v}%`" />尺寸 / 禁用
vue
<ASlider v-model="value" size="sm" />
<ASlider v-model="value" size="md" />
<ASlider v-model="value" disabled />API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number | 0 | 当前值 |
min | number | 0 | 最小值 |
max | number | 100 | 最大值 |
step | number | 1 | 步长,支持小数 |
disabled | boolean | false | 禁用 |
size | 'sm' | 'md' | 'md' | 尺寸 |
tooltip | boolean | true | 是否显示 tooltip |
formatTooltip | (value) => string | number | — | 自定义 tooltip 内容 |
Emits
| 名称 | 参数 | 说明 |
|---|---|---|
update:modelValue | value | 拖动 / 步进时连续触发 |
change | value | 拖动结束或键盘步进后触发,适合做提交 |
键盘交互
| 按键 | 行为 |
|---|---|
← / ↓ | 减少 1 个 step |
→ / ↑ | 增加 1 个 step |
Shift + 方向键 | 步长 × 10 |
Home | 跳到最小值 |
End | 跳到最大值 |
无障碍
- thumb 使用
role="slider",曝露aria-valuemin/aria-valuemax/aria-valuenow/aria-orientation - 禁用时
tabindex设为 -1,焦点环遵循全局:focus-visible - 屏幕阅读器朗读当前值,无需额外配置