Skip to content

滑块

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

使用

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

API

组件描述
v-slider主要组件

示例

属性

颜色

可以使用 colortrack-colorthumb-color 属性设置滑块的颜色。

禁用

您不能与 disabled 滑块交互。

步长

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

图标

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

最小值和最大值

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

只读

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

上方标签

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

刻度

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

垂直滑块

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

插槽

后置插槽和前置插槽

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

追加文本字段

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