Slider 滑块
基于 reka-ui 的 Slider 原语构建的新粗野主义风格滑块，支持 v-model。
预览
基础用法
值：60
自定义范围 (min=0, max=200, step=10)
值：25
颜色变体 (variant=primary)
值：50
禁用状态
垂直方向
值：50
刻度标记
值：50
拖拽提示
值：50
安装
pnpm dlx brutx-vue@latest add slider用法
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const value = ref([50])
</script>
<template>
<Slider v-model="value" :max="100" :step="1" />
</template>范围滑块
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const range = ref([25, 75])
</script>
<template>
<Slider v-model="range" :max="100" :step="1" />
</template>带最小/最大值
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const value = ref([500])
</script>
<template>
<Slider v-model="value" :min="0" :max="1000" :step="50" />
</template>禁用状态
<template>
<Slider v-model="value" disabled />
</template>方向
通过 orientation 属性切换水平 (horizontal) 或垂直 (vertical) 布局，该属性透传给 reka-ui 原语。垂直模式需要为容器设定高度。
<template>
<div class="h-48">
<Slider v-model="value" orientation="vertical" />
</div>
</template>刻度标记
通过 marks 属性传入数值数组，会在轨道对应位置渲染刻度小标记。
<template>
<Slider v-model="value" :marks="[0, 25, 50, 75, 100]" />
</template>拖拽提示
开启 showTooltip 后，拖拽或悬停滑块时会在拇指附近显示当前值。
<template>
<Slider v-model="value" show-tooltip />
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number[] | undefined | undefined | 当前滑块值数组；单值数组渲染一个滑块，双值数组用于范围滑块，可用 v-model 受控。 |
详情声明类型number[] | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
min | number | undefined | 0 | 可选的最小值，也是空值数组的回退值。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
max | number | undefined | 100 | 可选的最大值。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
step | number | undefined | 1 | 键盘或指针调整数值时使用的步长。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
disabled | boolean | undefined | false | 禁用所有滑块拇指的交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
ariaLabel | string | undefined | undefined | 传递给滑块原语的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
ariaLabelledby | string | undefined | undefined | 命名焦点滑块的外部元素 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
ariaDescribedby | string | undefined | undefined | 焦点滑块的说明 ID，与内置提示说明合并。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
getValueText | ((value: number, index: number) => string) | undefined | undefined | 为各滑块生成 aria-valuetext 可读值的回调函数。 |
详情声明类型((value: number, index: number) => string) | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置滑轨和拇指的尺寸预设。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
variant | "accent" | "default" | "primary" | "secondary" | "success" | undefined | "default" | 设置滑块填充及拇指的颜色变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "success" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
orientation | "horizontal" | "vertical" | undefined | "horizontal" | 选择水平或垂直布局，并相应布置刻度与提示。 |
详情声明类型NonNullable<"vertical" | "horizontal" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
marks | number[] | undefined | undefined | 在滑轨指定数值位置绘制的刻度标记数组。 |
详情声明类型number[] | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
showTooltip | boolean | undefined | false | 在当前聚焦或悬停的滑块拇指旁显示其数值提示。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
class | string | undefined | undefined | 追加到滑块根容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/slider/Slider.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: number[]] | 用户调整滑块时发出新的数值数组；通过父组件更新 modelValue 完成受控绑定。 |
详情声明类型[value: number[]] 来源packages/ui/src/components/slider/Slider.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
currentValue | number[] | 当前有效滑块数值数组的计算属性；只读，未传值或空数组时包含 min。 |
详情声明类型number[] 来源packages/ui/src/components/slider/Slider.vue | ||
setValue | (value: number[]) => void | 以 update:modelValue 事件请求父组件设置新的滑块数值数组。 |
详情声明类型(value: number[]) => void 来源packages/ui/src/components/slider/Slider.vue | ||
可访问性
- 键盘操作：支持方向键调节值，
Home/End跳转最小/最大值 - ARIA 属性：自动管理
aria-valuemin、aria-valuemax、aria-valuenow、aria-orientation等 - 焦点管理：滑块可通过 Tab 键聚焦
方法（defineExpose）
通过 ref 访问组件实例后可调用 setValue，请求父组件更新滑块值：
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const sliderRef = ref(null)
const value = ref([50])
function resetToCenter() {
sliderRef.value?.setValue([50])
}
</script>
<template>
<Slider ref="sliderRef" v-model="value" />
<button @click="resetToCenter">Reset</button>
</template>