Слайдеры v-slider

v-slider — компонент пользовательского интерфейса библиотеки Vuetify, предназначенный для выбора числового значения из заданного диапазона. Он реализует графическое управление в виде горизонтальной или вертикальной шкалы, по которой перемещается ползунок. Слайдер используется для настройки параметров, регулировки значений, выбора диапазонов и создания интерактивных интерфейсов.

Компонент интегрируется с системой реактивности Vue и поддерживает двустороннюю привязку данных через v-model.

Базовое использование

Минимальная реализация слайдера включает привязку значения и диапазон допустимых чисел.

<template>
  <v-slider v-model="value"></v-slider>
</template>

<script>
export default {
  data() {
    return {
      value: 50
    }
  }
}
</script>

В этом примере:

  • v-model хранит текущее значение слайдера
  • значение автоматически обновляется при перемещении ползунка

По умолчанию диапазон значений составляет от 0 до 100.

Ограничение диапазона

Диапазон выбираемых значений задаётся с помощью свойств:

  • min — минимальное значение
  • max — максимальное значение
<v-slider
  v-model="volume"
  :min="0"
  :max="10"
></v-slider>
data() {
  return {
    volume: 5
  }
}

Ползунок перемещается только в пределах указанного диапазона.

Шаг изменения значения

Свойство step определяет интервал изменения значения.

<v-slider
  v-model="value"
  :min="0"
  :max="100"
  :step="5"
></v-slider>

Особенности:

  • значение изменяется кратно step
  • предотвращает выбор промежуточных значений

Примеры:

step возможные значения
1 0,1,2,3
5 0,5,10
10 0,10,20

Отображение подписи значения

Свойство thumb-label отображает значение непосредственно над ползунком.

<v-slider
  v-model="value"
  thumb-label
></v-slider>

Вариант с постоянным отображением:

<v-slider
  v-model="value"
  thumb-label="always"
></v-slider>

Режимы:

  • true — подпись появляется при перемещении
  • always — отображается постоянно

Отображение делений шкалы

Для визуального обозначения шагов используется свойство ticks.

<v-slider
  v-model="value"
  :ticks="true"
  :step="10"
></v-slider>

Дополнительные параметры:

  • ticks="always" — деления всегда видны
  • tick-size — размер делений
<v-slider
  v-model="value"
  ticks="always"
  :tick-size="4"
></v-slider>

Деления помогают пользователю точнее ориентироваться на шкале.

Цвет слайдера

Цвет ползунка и активной части шкалы задаётся через свойство color.

<v-slider
  v-model="value"
  color="green"
></v-slider>

Изменение цвета неактивной части:

<v-slider
  v-model="value"
  color="blue"
  track-color="grey"
></v-slider>

Доступны цвета из темы Vuetify:

  • primary
  • secondary
  • success
  • error
  • warning

Отключение компонента

Слайдер можно перевести в неактивное состояние.

<v-slider
  v-model="value"
  disabled
></v-slider>

Особенности отключённого состояния:

  • пользователь не может изменить значение
  • элемент визуально затемняется
  • событие изменения не вызывается

Вертикальный слайдер

Компонент поддерживает вертикальное расположение.

<v-slider
  v-model="value"
  vertical
></v-slider>

Часто используется вместе с ограничением высоты:

<v-slider
  v-model="value"
  vertical
  style="height: 200px"
></v-slider>

Вертикальные слайдеры применяются в интерфейсах:

  • аудиомикшеров
  • панелей управления
  • графических редакторов

Использование меток (label)

Свойство label добавляет текстовое описание элемента.

<v-slider
  v-model="brightness"
  label="Яркость"
></v-slider>

Текст отображается над компонентом и поясняет назначение параметра.

Иконки начала и конца

Vuetify позволяет добавлять иконки по краям шкалы.

<v-slider
  v-model="volume"
  prepend-icon="mdi-volume-low"
  append-icon="mdi-volume-high"
></v-slider>

Назначение:

  • визуальное обозначение минимального и максимального состояния
  • улучшение UX

События компонента

v-slider генерирует события при изменении значения.

update:modelValue

Основное событие изменения.

<v-slider
  v-model="value"
  @update:modelValue="onChange"
></v-slider>
methods: {
  onChange(val) {
    console.log(val)
  }
}

change

Срабатывает после завершения перемещения ползунка.

<v-slider
  v-model="value"
  @change="handleChange"
></v-slider>

Используется для:

  • отправки данных на сервер
  • выполнения вычислений
  • запуска действий после изменения

Слайдер с пользовательской подписью

Значение можно форматировать.

<v-slider
  v-model="price"
  thumb-label="always"
>
  <template v-slot:thumb-label="{ modelValue }">
    {{ modelValue }} $
  </template>
</v-slider>

Результат:

  • значение отображается с валютой
  • пользователь получает дополнительный контекст

Двусторонняя привязка

Основная архитектура компонента основана на реактивности Vue.

<v-slider v-model="progress"></v-slider>

<p>Текущее значение: {{ progress }}</p>
data() {
  return {
    progress: 25
  }
}

Любое изменение:

  • обновляет значение переменной
  • автоматически отражается в интерфейсе

Практический пример: регулятор громкости

<template>
  <v-container>
    <v-slider
      v-model="volume"
      :min="0"
      :max="100"
      :step="1"
      thumb-label
      prepend-icon="mdi-volume-off"
      append-icon="mdi-volume-high"
      color="primary"
    ></v-slider>

    <div>Громкость: {{ volume }}%</div>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      volume: 50
    }
  }
}
</script>

Особенности реализации:

  • диапазон 0–100
  • отображение текущего значения
  • иконки громкости
  • динамическое обновление интерфейса

Часто используемые свойства v-slider

Свойство Назначение
v-model текущее значение
min минимальное значение
max максимальное значение
step шаг изменения
color цвет активной части
track-color цвет неактивной части
thumb-label отображение значения
ticks деления шкалы
vertical вертикальная ориентация
disabled отключение компонента
label текстовая подпись

Когда использовать v-slider

Компонент подходит для интерфейсов, где требуется быстрое визуальное изменение параметра:

  • регулировка громкости
  • настройка яркости
  • выбор процентных значений
  • фильтрация по числовому диапазону
  • настройка параметров графики
  • выбор временных интервалов

Использование слайдера повышает удобство интерфейса, когда пользователь должен выбрать значение из непрерывного или квазинепрерывного диапазона.

Оглавление