Slider 滑块

通过拖动滑块在一个固定区间内进行选择

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法

在拖动滑块时，显示当前值

离散值

选项可以是离散的

带有输入框的滑块

通过输入框输入来改变当前的值。

不同尺寸

位置

您可以自定义 Tooltip 提示的位置。

范围选择

你还可以选择一个范围值

垂直模式

显示标记

API

属性

属性名描述类型默认
model-value / v-model选中项绑定值number / object0
min最小值number0
max最大值number100
disabled是否禁用booleanfalse
step步长number1
show-input是否显示输入框，仅在非范围选择时有效booleanfalse
show-input-controls在显示输入框的情况下，是否显示输入框的控制按钮booleantrue
sizeslider 包装器的大小，垂直模式下该属性不可用enumdefault
input-size输入框的大小，如果设置了 size 属性，默认值自动取 sizeenumdefault
show-stops是否显示间断点booleanfalse
show-tooltip是否显示提示信息booleantrue
format-tooltip格式化提示信息Function—
range是否开启选择范围booleanfalse
vertical垂直模式booleanfalse
height滑块高度，垂直模式必填string—
label屏幕阅读器标签string—
range-start-label当 range 为true时，屏幕阅读器标签开始的标记string—
range-end-label当 range 为true时，屏幕阅读器标签结尾的标记string—
format-value-text显示屏幕阅读器的 aria-valuenow 属性的格式Function—
debounce输入时的去抖延迟，毫秒，仅在 show-input 等于 true 时有效number300
tooltip-classtooltip 的自定义类名string—
placementTooltip 出现的位置enumtop
marks标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式object—
validate-event输入时是否触发表单的校验booleantrue

事件

事件名说明类型
change值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）Function
input数据改变时触发（使用鼠标拖曳时，活动过程实时触发）Function

类型声明

显示类型声明
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]

源代码

组件 • 文档

贡献者