滑块

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

用例

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

API

v-slider
名称
always-dirty New in — v1.1
默认值
false
类型
boolean

Components.Sliders.

名称
append-icon
默认值
undefined
类型
string

Components.Sliders.

名称
background-color
默认值
undefined
类型
string

Components.Sliders.

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

Components.Sliders.

名称
error
默认值
false
类型
boolean

将输入框设置为手动错误状态。

名称
error-count
默认值
1
类型
number | string

Components.Sliders.

名称
error-messages
默认值
[]
类型
string | array

将输入框置于错误状态,并传入自定义的错误信息。将与来自规则(rules)属性的任何验证相结合。这个字段不会触发验证。

名称
height
默认值
undefined
类型
number | string

设置组件高度

名称
hide-details
默认值
false
类型
boolean

Components.Sliders.

名称
hint
默认值
undefined
类型
string

Components.Sliders.

名称
inverse-label New in — v1.1
默认值
false
类型
boolean

Components.Sliders.

名称
label
默认值
undefined
类型
string

Components.Sliders.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
loading
默认值
false
类型
boolean | string

Components.Sliders.

名称
max
默认值
100
类型
number | string

设置最大宽度

名称
messages
默认值
[]
类型
string | array

Components.Sliders.

名称
min
默认值
0
类型
number | string

设置最小宽度

名称
persistent-hint
默认值
false
类型
boolean

Components.Sliders.

名称
prepend-icon
默认值
undefined
类型
string

Components.Sliders.

名称
readonly
默认值
false
类型
boolean

Components.Sliders.

名称
rules
默认值
[]
类型
array

返回True或带有错误信息的字符串的函数数组。

名称
step
默认值
1
类型
number | string

如果大于0,则为滑块上的点设置步骤间隔

名称
success New in — v1.1
默认值
false
类型
boolean

Components.Sliders.

名称
success-messages New in — v1.1
默认值
[]
类型
string | array

Components.Sliders.

名称
thumb-color
默认值
undefined
类型
string

设置拇指和拇指标签颜色

名称
thumb-label
默认值
undefined
类型
boolean | string

显示拇指标签

名称
thumb-size New in — v1.1
默认值
32
类型
number | string

Components.Sliders.

名称
tick-labels New in — v1.1
默认值
[]
类型
array

Components.Sliders.

名称
tick-size New in — v1.1
默认值
1
类型
number | string

Components.Sliders.

名称
ticks
默认值
false
类型
boolean | string

Components.Sliders.

名称
track-color
默认值
undefined
类型
string

设置曲目填充色彩

名称
validate-on-blur
默认值
false
类型
boolean

延迟验证直到失去焦点的事件被触发

名称
value
默认值
undefined
类型
number | string

控制可见性

示例

Thumb

You can display a thumb-label while sliding or always. It It can have a custom color by setting thumb-color and a custom size with thumb-size. With always-dirty its color will never change, even when on min value.

Custom Range slider

Using the tick-labels prop along with a scoped slot, you can create a very customized solution.

Ticks

Tick marks represent predetermined values to which the user can move the slider.

离散的

离散滑块提供了一个拇指标签(倒水滴状),显示当前的确切数量。使用step属性可以禁止在步骤之外选择值。

图标

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

带有可编辑的数值

滑块可以与其他组件相结合,以获得更好的显示效果。

自定义色彩

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

Validation

Vuetify includes simple validation through the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message.

Range

Range sliders.

Min & Max values

You can set min and max values of sliders.

Metronome

Use slotted prepend and append icons to easily customize the v-slider to fit any situation.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore