Слайдеры диапазона v-range-slider

v-range-slider — компонент библиотеки Vuetify, предназначенный для выбора диапазона значений между двумя границами. В отличие от обычного v-slider, который управляет одним значением, диапазонный слайдер содержит два ползунка, определяющих минимальное и максимальное значение.

Компонент широко используется для:

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

Диапазонный слайдер представляет собой визуальную шкалу, по которой перемещаются два маркера. Область между ними обычно выделяется цветом, что делает интерфейс интуитивным.

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

Минимальная реализация v-range-slider требует только связывания значения через v-model.

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

<script>
export default {
  data() {
    return {
      range: [20, 80]
    }
  }
}
</script>

Особенности

  • v-model принимает массив из двух чисел
  • первое значение — левая граница
  • второе значение — правая граница

Пример состояния:

[20, 80]

Это означает, что выбран диапазон от 20 до 80.

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

Для определения границ шкалы используются свойства:

Свойство Описание
min минимальное значение
max максимальное значение

Пример:

<v-range-slider
  v-model="range"
  :min="0"
  :max="100"
></v-range-slider>
range: [25, 75]

Ползунки не смогут выйти за пределы диапазона 0–100.

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

Свойство step определяет шаг перемещения ползунков.

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

Теперь возможные значения:

0, 5, 10, 15, 20 ...

Это удобно для:

  • финансовых диапазонов
  • рейтингов
  • настроек параметров

Отображение текущих значений

Значения диапазона можно выводить с помощью слотов или дополнительных компонентов.

Пример отображения:

<template>
  <div>
    <v-range-slider
      v-model="range"
      :min="0"
      :max="100"
    ></v-range-slider>

    <div>
      Минимум: {{ range[0] }}  
      Максимум: {{ range[1] }}
    </div>
  </div>
</template>

При перемещении ползунков значения обновляются реактивно.

Отображение меток (thumb-label)

Свойство thumb-label включает подсказки на ползунках.

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

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

Постоянное отображение

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

Значения будут отображаться постоянно.

Метки шкалы (ticks)

Для визуализации делений используется свойство ticks.

<v-range-slider
  v-model="range"
  :min="0"
  :max="10"
  ticks
></v-range-slider>

Отображаются отметки вдоль всей шкалы.

Интервальные метки

<v-range-slider
  v-model="range"
  :min="0"
  :max="10"
  :step="1"
  show-ticks
></v-range-slider>

Это повышает точность выбора значений.

Подписи значений (tick-labels)

Для каждой отметки можно задать текст.

<v-range-slider
  v-model="range"
  :min="0"
  :max="4"
  :tick-labels="['0', '25', '50', '75', '100']"
></v-range-slider>

Теперь каждая отметка имеет подпись.

Настройка цвета

Цвет активного диапазона можно изменить через color.

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

Также доступны:

Свойство Назначение
color активный диапазон
track-color цвет неактивной шкалы
thumb-color цвет ползунков

Пример:

<v-range-slider
  v-model="range"
  color="blue"
  track-color="grey"
  thumb-color="red"
></v-range-slider>

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

Для блокировки взаимодействия используется disabled.

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

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

Вертикальный режим

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

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

Часто используется в:

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

Ограничение расстояния между ползунками

Иногда требуется запретить слишком узкий диапазон.

Для этого используется min-range.

<v-range-slider
  v-model="range"
  :min="0"
  :max="100"
  :min-range="10"
></v-range-slider>

Минимальная ширина диапазона — 10 единиц.

Максимальное расстояние (max-range)

Также можно ограничить максимальный диапазон.

<v-range-slider
  v-model="range"
  :max-range="50"
></v-range-slider>

Пользователь не сможет выбрать диапазон больше 50.

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

Основные события:

Событие Описание
update:modelValue изменение диапазона
change окончательное изменение
start начало перемещения
end завершение перемещения

Пример:

<v-range-slider
  v-model="range"
  @change="onChange"
></v-range-slider>
methods: {
  onChange(value) {
    console.log("Новый диапазон:", value)
  }
}

Использование в фильтрах

v-range-slider часто применяется в интерфейсах фильтрации.

Пример фильтра цены:

<template>
  <div>
    <v-range-slider
      v-model="priceRange"
      :min="0"
      :max="1000"
      :step="10"
      thumb-label
    ></v-range-slider>

    <div>
      Цена: {{ priceRange[0] }} — {{ priceRange[1] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      priceRange: [100, 700]
    }
  }
}
</script>

Пользовательские подписи ползунков

С помощью слотов можно кастомизировать содержимое.

<v-range-slider v-model="range">
  <template v-slot:thumb-label="{ value }">
    {{ value }}%
  </template>
</v-range-slider>

Теперь рядом с ползунками отображается процент.

Работа с computed

Иногда диапазон используется для фильтрации данных.

computed: {
  filteredProducts() {
    return this.products.filter(p =>
      p.price >= this.range[0] &&
      p.price <= this.range[1]
    )
  }
}

Диапазон управляет отображением элементов списка.

Производительность и реактивность

v-range-slider полностью интегрирован с реактивной системой фреймворка Vue.js. Изменение диапазона мгновенно отражается:

  • в вычисляемых свойствах
  • в фильтрации данных
  • в отображении интерфейса

Компонент оптимизирован для частых обновлений и плавного взаимодействия.

Частые сценарии применения

Фильтр цен

100 — 500 $

Выбор возраста

18 — 65 лет

Интервал времени

08:00 — 18:00

Настройка параметров

скорость 20 — 80

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

Диапазонные слайдеры обеспечивают:

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

По сравнению с двумя отдельными полями ввода:

Подход Удобство
Два input медленнее
range-slider быстрее

Рекомендации по использованию

  1. Использовать step для контроля точности.
  2. Ограничивать диапазон через min и max.
  3. Показывать значения через thumb-label.
  4. Использовать min-range для предотвращения слишком узких диапазонов.
  5. Добавлять подписи шкалы для повышения читаемости интерфейса.

Типичные ошибки

Неправильный формат v-model

Неверно:

range: 50

Правильно:

range: [20, 80]

Значения вне диапазона

range: [-10, 120]

Если min=0 и max=100, такие значения будут автоматически ограничены.

Отсутствие шага

При работе с денежными значениями без step может возникнуть множество дробных чисел.

Рекомендуется:

step="10"

Сравнение с v-slider

Компонент Назначение
v-slider одно значение
v-range-slider диапазон

v-range-slider является расширением логики обычного слайдера и используется там, где требуется интервал значений, а не единичный параметр.

Оглавление