Slider

Компонент 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 или String с сообщением об ошибке

Имя
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-icon и preend-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.

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