Slider

滑块组件,基于 reka-ui 封装;modelValue 使用数组形式,单值传 [n],区间选择传 [min, max]。

基本用法

单值滑块

使用一元数组即可获得单 thumb 的滑块。

当前值: 50

<script setup lang="ts">
import { Slider } from '@tripo3d/design';
import { ref } from 'vue';

const value = ref([50]);
</script>

<template>
  <Slider v-model="value" :min="0" :max="100" :step="1" />
</template>

区间选择

双 thumb 区间

传入两个元素的数组即可获得区间滑块。

区间: [20, 80]

<script setup lang="ts">
const range = ref([20, 80]);
</script>

<template>
  <Slider v-model="range" :min="0" :max="100" :step="1" />
</template>

自定义步长

step=10

步长较大时 thumb 按档位吸附。

当前值: 40

<Slider v-model="value" :min="0" :max="100" :step="10" />

禁用态

disabled

<Slider :model-value="[30]" disabled />

API

Props

名称	类型	默认值	说明
modelValue	number[]	—	滑块值(数组);单值传 [n],区间传 [min, max]
defaultValue	number[]	—	非受控初始值
min	number	0	最小值
max	number	100	最大值
step	number	1	步长
disabled	boolean	—	是否禁用
orientation	'horizontal' | 'vertical'	'horizontal'	滑块方向
class	string	—	容器 class

其余 props 透传至 reka-ui SliderRootProps。

Events

事件	Payload	说明
update:modelValue	(value: number[])	滑块值变化

可访问性

• 基于 reka-ui,thumb 带 role="slider"、aria-valuenow、aria-valuemin、aria-valuemax
• 支持键盘方向键、Home / End、PgUp / PgDn 精细调节
• disabled 时从可达性树中移除交互语义