Skip to content

滑块 ​

v-slider 组件可以用作某些数字输入的可视化替代。

使用 ​

滑块组件可以根据一个用户选择的轨迹的位置,来表示一个单独的值。适合用来作音量,亮度,或者图像的某个滤镜的调整。

API ​

组件描述
v-slider主要组件

示例 ​

属性 ​

颜色 ​

可以使用 color、track-color 和 thumb-color 属性设置滑块的颜色。

禁用 ​

您不能与 disabled 滑块交互。

步长 ​

使用 step 属性可以控制滑块的精度,以及每一次可以移动的距离。

图标 ​

你可以使用 append-icon 和 prepend-icon 属性在滑块的后面和前面添加图标。还能够添加 @click:append 和 @click:prepend 来触发点击这些图标的执行函数。

最小值和最大值 ​

您可以通过 min 和 max 设置滑块的最小值和最大值。

只读 ​

您不能与 readonly 滑块交互,但它们看起来与普通滑块一样。

上方标签 ​

你可以选择在滑块滑动时显示上方标签,或者将 thumb-label 属性设为 always 来始终显示。可以设定 thumb-color 属性调整滑块的颜色,也可以设定 thumb-size 属性调整滑块的大小。

刻度 ​

刻度线决定了用户能将滑块移动到的预定值。

垂直滑块 ​

你也可以使用 direction 属性将滑块方向切换到垂直方向。如果你要更改滑块的高度,请使用 CSS 来修改。

插槽 ​

后置插槽和前置插槽 ​

使用 append 和 prepend 插槽来轻松自定义 v-slider 以便适应任何情况。

追加文本字段 ​

滑块可以在它的 append 插槽中添加其他组件,例如 v-text-field,以便为组件添加额外的功能。