Slider 滑块

一个可交互的滑块组件，用于在指定范围内选择数值。

参数

参数	说明	类型	可选值	默认值
pt	样式穿透配置	PassThrough	-	-
modelValue	绑定的当前值	number	-	0
values	绑定的范围值	number[]	-	[]
max	可选择的最大值	number	-	100
min	可选择的最小值	number	-	0
step	滑动步长	number	-	1
disabled	是否禁用滑块	boolean	-	false
blockSize	滑块手柄大小（px）	number	-	20
showValue	是否显示当前值	boolean	-	false
range	是否启用范围选择	boolean	-	false

事件

事件名称	说明	回调参数
update:modelValue	滑块值变化时触发的双向绑定
update:values	滑块范围值变化时触发的双向绑定
change	滑块值变化时触发的事件	(value: number) => void
changing	滑动中变化时触发的事件	(value: number | number[]) => void

PassThrough

样式穿透配置对象，用于深度自定义组件内部元素的样式。

参数	说明	类型
className	组件根元素样式	string
track	滑块轨道配置	PassThroughProps
progress	滑块进度条配置	PassThroughProps
thumb	滑块手柄配置	PassThroughProps
value	显示数值标签配置	PassThroughProps

示例

基本用法

最简单的滑块使用方式

<cl-slider></cl-slider>

显示当前值

在滑块上方显示当前选择的数值

<cl-slider show-value></cl-slider>

设置步长

设置滑块的移动步长为 10

<cl-slider :step="10"></cl-slider>

自定义范围

设置滑块的最大值为 50

<cl-slider :max="50"></cl-slider>

禁用状态

禁用滑块，阻止用户交互

<cl-slider disabled></cl-slider>

范围值

通过设置 range 属性，可以开启范围选择模式，此时 v-model:values 需要绑定一个数组

<cl-slider range v-model:values="values"></cl-slider>

<script lang="ts" setup>
const values = ref<number[]>([10, 30]);
</script>