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
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 или String с сообщением об ошибке
Если значение больше 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
и 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.