QSlider и QRange

Основы QSlider

QSlider — это компонент библиотеки Quasar, предназначенный для выбора числового значения из заданного диапазона. Он используется как визуальный ползунок, позволяющий пользователю интуитивно регулировать значения.

Основные свойства QSlider:

  • v-model — связывает значение ползунка с переменной в компоненте Vue.
  • min и max — задают минимальное и максимальное значение диапазона.
  • step — определяет шаг изменения значения. Если не указан, по умолчанию шаг равен 1.
  • label — отображает текущее значение над ползунком.
  • color и track-color — позволяют настроить цвет ползунка и трека.
  • disable — делает ползунок неактивным.
  • vertical — переворачивает ползунок в вертикальное положение.

Пример использования QSlider:

<template>
  <q-slider
    v-model="volume"
    :min="0"
    :max="100"
    step="5"
    label
    color="primary"
    track-color="grey-3"
  />
</template>

<script setup>
import { ref } from 'vue'

const volume = ref(50)
</script>

В этом примере создается горизонтальный ползунок с диапазоном от 0 до 100 и шагом 5. Значение volume автоматически обновляется при перемещении ползунка.

Расширенные возможности QSlider

1. Настройка шкалы (ticks) Полезно для визуализации определенных контрольных точек:

<q-slider
  v-model="temperature"
  :min="0"
  :max="100"
  step="10"
  ticks
  tick-labels
/>

Свойство ticks отображает отметки, а tick-labels — подписи к ним. Это удобно при выборе дискретных значений, например, температуры или рейтинга.

2. Форматирование отображаемого значения Можно использовать label-value для кастомного отображения текущего значения:

<q-slider
  v-model="speed"
  :min="0"
  :max="200"
  step="10"
  :label-value="val => `${val} км/ч`"
/>

QRange: двойной ползунок

QRange расширяет возможности QSlider, позволяя работать с диапазоном значений. Полезен, когда требуется выбрать минимум и максимум одновременно, например, для фильтров товаров по цене.

Основные свойства QRange:

  • v-model — объект с полями [min, max].
  • min, max и step — работают аналогично QSlider.
  • label — отображает оба значения над ползунками.
  • color, track-color — настраивают визуальное оформление.
  • disable, vertical — идентичны QSlider.

Пример использования QRange:

<template>
  <q-range
    v-model="priceRange"
    :min="0"
    :max="1000"
    step="50"
    label
    color="secondary"
    track-color="grey-4"
  />
</template>

<script setup>
import { ref } from 'vue'

const priceRange = ref([200, 800])
</script>

В этом примере два ползунка позволяют выбрать диапазон цен от 200 до 800.

Расширенные возможности QRange

1. Ограничение минимальной дистанции между ползунками Свойство range-value и событие @input позволяют задавать минимальное расстояние между значениями:

<q-range
  v-model="ageRange"
  :min="0"
  :max="100"
  step="1"
  label
  @input="val => {
    if (val[1] - val[0] < 5) {
      val[1] = val[0] + 5
    }
  }"
/>

2. Кастомизация подписи Для каждого ползунка можно задать форматирование:

<q-range
  v-model="weightRange"
  :min="0"
  :max="200"
  step="5"
  :label-value="vals => `От ${vals[0]} до ${vals[1]} кг`"
/>

Взаимодействие с другими компонентами

QSlider и QRange удобно комбинировать с QInput для точного ввода:

<q-slider v-model="value" :min="0" :max="100" />
<q-input v-model="value" type="number" :min="0" :max="100" />

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

Стилизация и темы

Компоненты полностью интегрируются с системой тем Quasar. Свойства color и track-color позволяют использовать любые цвета из палитры, включая динамические классы:

<q-slider
  v-model="brightness"
  :color="brightness > 50 ? 'green' : 'red'"
  :track-color="'grey-2'"
/>

Также поддерживаются CSS-классы q-slider--vertical, q-range--dense и другие для точной настройки внешнего вида.

Производительность и оптимизация

  • QSlider и QRange используют реактивные свойства Vue, что делает обновление мгновенным.
  • Для больших приложений рекомендуется минимизировать количество вычислений внутри @input и v-model, особенно при анимации ползунков.
  • Использование debounce позволяет оптимизировать обработку значений при высокочастотных событиях, например, при фильтрации товаров в реальном времени.

Итоговые возможности

Компоненты QSlider и QRange в Quasar обеспечивают:

  • Гибкое управление числовыми значениями и диапазонами.
  • Легкую кастомизацию внешнего вида и подписи значений.
  • Простую интеграцию с другими элементами интерфейса.
  • Поддержку вертикальной ориентации, шагов, тиков и динамических цветов.

Эти компоненты являются фундаментальными элементами при создании интерактивных форм, фильтров и панели настроек в приложениях на Vue с Quasar.

Оглавление