Slider 滑块

支持单向滑块和双向滑块，可用于在范围内选择一个值或一段区间。

组件类型

基本用法

v-model 为绑定值。值为 number 时显示一个滑块。

<wd-slider v-model="value" />

const value = ref<number>(30)

双向滑块

设置 range 后，绑定值变为数组类型。

<wd-slider v-model="value" range />

const value = ref<number[]>([20, 60])

组件状态

禁用状态

设置 disabled 禁用滑块。

<wd-slider v-model="value" disabled />

组件样式

显示极值

设置 show-extreme-value 显示最小值和最大值。

<wd-slider v-model="value" show-extreme-value />

管道样式

设置 theme="capsule" 使用管道样式。

<wd-slider v-model="value" theme="capsule" />

指定步长

通过 step 设置步长。

<wd-slider v-model="value" :step="10" />

指定选择范围

通过 min 和 max 设置取值范围。

<wd-slider v-model="value" :min="-10" :max="10" show-extreme-value />

刻度标记

通过 marks 配置刻度标记。

<wd-slider v-model="value" :marks="[0, 25, 50, 75, 100]" :step="25" />

刻度标记（管道）

刻度标记也可以与管道样式组合使用。

<wd-slider v-model="value" :marks="[0, 25, 50, 75, 100]" :step="25" theme="capsule" />

布局能力

垂直方向

设置 vertical 以垂直方向展示。

<wd-slider v-model="value" vertical />
<wd-slider v-model="rangeValue" vertical range />

垂直 + 管道

垂直方向支持与 theme="capsule" 组合使用。

<wd-slider v-model="value" vertical theme="capsule" />
<wd-slider v-model="rangeValue" vertical theme="capsule" range show-extreme-value />

Attributes

参数	说明	类型	默认值
model-value / v-model	当前滑块值，单滑块为 number，双滑块为 number[]	SliderValue	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
range	是否为双向滑块模式	boolean	false
vertical	是否垂直展示	boolean	false
theme	滑块风格，可选值为 default、capsule	SliderTheme	'default'
disabled	是否禁用	boolean	false
show-extreme-value	是否显示最小值和最大值文本	boolean	false
popover-visible	气泡显示模式，可选值为 always、normal、never	SliderPopoverVisible	'normal'
marks	刻度标记，支持数组或对象形式	SliderMarks	-
active-color	进度条激活态颜色	string	''
inactive-color	进度条未激活态颜色	string	''
custom-class	根节点样式类	string	''
custom-style	根节点样式	string	''

Events

事件名称	说明	参数
dragstart	开始拖动时触发	{ value }
dragmove	拖动过程中触发	{ value }
dragend	拖动结束时触发	{ value }
change	值变化时触发	value

Methods

方法名	说明	参数
initSlider	初始化 slider 尺寸数据	-

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-slider-bar-height	$n-2	-
--wot-slider-bar-height-capsule	$n-24	轨道高度
--wot-slider-bar-bg	$filled-strong	胶囊轨道高度
--wot-slider-bar-radius	$radius-full	轨道背景色
--wot-slider-bar-height-vertical	$n-248	轨道圆角
--wot-slider-line-bg	$primary-6	-
--wot-slider-line-height	$n-2	进度条背景色
--wot-slider-line-height-capsule	$n-18	进度条高度
--wot-slider-dot-size	$n-24	-
--wot-slider-dot-bg	$filled-oppo	滑块尺寸
--wot-slider-dot-shadow	0 2px 8px 0 rgba(0, 0, 0, 0.1)	滑块背景色
--wot-slider-dot-popover-bg	$opacfilled-tooltip-toast-cover	-
--wot-slider-dot-popover-color	$text-white	气泡提示背景色
--wot-slider-dot-popover-radius	$radius-main	气泡提示文字颜色
--wot-slider-dot-popover-padding	$padding-extra-tight $padding-loose	气泡提示圆角
--wot-slider-dot-popover-font-size	$typography-body-size-main	气泡提示内边距
--wot-slider-dot-popover-line-height	$typography-body-line-height-size-main	气泡提示文字字号
--wot-slider-dot-popover-gap	$n-3	气泡提示行高
--wot-slider-dot-popover-arrow-width	$n-12	气泡提示与滑块间距
--wot-slider-dot-popover-arrow-height	$n-6	气泡提示箭头宽度
--wot-slider-dot-popover-duration-exit	100ms	气泡提示箭头高度
--wot-slider-dot-popover-easing-exit	cubic-bezier(0.4, 0, 1, 1)	气泡提示离场动画时长
--wot-slider-dot-popover-duration-enter	200ms	气泡提示离场动画缓动
--wot-slider-dot-popover-easing-enter	cubic-bezier(0.34, 1.56, 0.64, 1)	气泡提示入场动画时长
--wot-slider-scale-size	$n-6	-
--wot-slider-scale-border-radius	$radius-full	刻度尺寸
--wot-slider-scale-bg	$filled-strong	刻度圆角
--wot-slider-scale-bg-active	$primary-6	刻度背景色
--wot-slider-scale-capsule-bg	$filled-strong	激活刻度背景色
--wot-slider-scale-capsule-width	$n-2	胶囊刻度背景色
--wot-slider-scale-capsule-border-radius	$radius-zero	胶囊刻度宽度
--wot-slider-scale-desc-font-size	$typography-body-size-main	胶囊刻度圆角
--wot-slider-scale-desc-line-height	$typography-body-line-height-size-main	刻度描述文字字号
--wot-slider-scale-desc-color	$text-main	刻度描述行高
--wot-slider-scale-desc-spacing	$spacing-tight	刻度描述文字颜色
--wot-slider-marks-desc-spacing	calc($slider-dot-size / 2 + $spacing-tight)	刻度描述间距
--wot-slider-marks-desc-capsule-spacing	calc($slider-dot-size + $spacing-super-tight)	标记描述间距
--wot-slider-marks-extra-padding	$padding-super-loose	胶囊标记描述间距
--wot-slider-marks-extra-capsule-padding	$padding-ultra-loose	标记额外内边距
--wot-slider-capsule-track-inset	$n-3	-
--wot-slider-extreme-spacing	$spacing-loose	胶囊轨道内缩距离
--wot-slider-value-font-size	$typography-body-size-main	-
--wot-slider-value-color	$text-secondary	极值文字字号
--wot-slider-opacity-disabled	$opacity-disabled	-

源代码

文档

• 组件