The v-slider component is a better visualization of the number input. It is used for gathering numerical user data.
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.
Ниже приведена коллекция простых и сложных примеров.
You can set min and max values of sliders.
You cannot interact with disabled sliders.
You cannot interact with readonly sliders, but they look as ordinary ones.
Вы можете добавлять иконки в слайдер с помощью свойств append-icon и preend-icon.
You can use vertical to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.
You can display a thumb-label while sliding or always. 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.
v-slider with inverse-label property displays label at the end of it.
Using the tick-labels prop along with slots, you can create a very customized solution.
Tick marks represent predetermined values to which the user can move the slider.
Вы можете использовать различные цвета используя свойства color, track-color и thumb-color.
Range sliders.
Vuetify включает в себя простую проверку с помощью rules. Подпрограмма принимает массив обратных вызовов. При проверке правил текущее значение v-model будет передано на обратный вызов. Этот обратный вызов должен возвращать либо true, либо String, сообщение об ошибке.
Use slots such as prepend and append to easily customize the v-slider to fit any situation.
Готовы к большему? Продолжить чтение с: