Vuetify

商店

企业版

v-slider组件是数字输入的更好的可视化,它用于收集数字用户数据。

滑块沿着条形图反映一系列值,用户可以从中选择单个值。 它们是调整设置的理想选择,例如音量,亮度或应用图像滤镜。

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

您可以设置滑块的 minmax 值。

您无法与 disabled 滑块互动。

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

您可以使用 append-iconprepend-icon 属性将图标添加到滑块。

您可以使用 vertical 将滑块切换到垂直方向。 如果需要更改滑块的高度,请使用 css。

您可以在滑动或总是显示“缩略图标签”。它可以通过设置“缩略图-颜色”和自定义大小,设置“缩略图-大小”来显示自定义颜色。 使用 always-dirty 时,即使在 min 值上,其颜色永远不会改变。

具有 inverse-label 属性的 v-slider 在其末尾显示标签。

使用 tick-labels 属性和插槽,您可以创建一个非常定制的解决方案。

刻度线代表用户可以将滑块移动到的预定值。

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

范围滑块。

Vuetify包含简单的验证通过使用 rules 属性,这个属性接受一个回调函数组,在验证规则时,当前的 v-model 值将被传递给回调函数,这个回调函数必须返回 tureString 或者错误信息。

使用诸如 prependappend 之类的插槽可轻松自定义 v-slider 以适应任何情况。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!