滑块
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
Components.Sliders.
Components.Sliders.
Components.Sliders.
将指定的色彩应用与控件
应用暗黑主题变体
Components.Sliders.
将输入框设置为手动错误状态。
Components.Sliders.
将输入框置于错误状态,并传入自定义的错误信息。将与来自规则(rules)属性的任何验证相结合。这个字段不会触发验证。
设置组件高度
Components.Sliders.
Components.Sliders.
Components.Sliders.
Components.Sliders.
应用明亮主题变体
Components.Sliders.
设置最大宽度
Components.Sliders.
设置最小宽度
Components.Sliders.
Components.Sliders.
Components.Sliders.
返回True或带有错误信息的字符串的函数数组。
如果大于0,则为滑块上的点设置步骤间隔
Components.Sliders.
Components.Sliders.
设置拇指和拇指标签颜色
显示拇指标签
Components.Sliders.
Components.Sliders.
Components.Sliders.
Components.Sliders.
设置曲目填充色彩
延迟验证直到失去焦点的事件被触发
控制可见性
示例
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-icon
和prepend-icon
属性将图标添加到滑块。
带有可编辑的数值
滑块可以与其他组件相结合,以获得更好的显示效果。
自定义色彩
您可以使用color
、track-color
和thumb-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.