Инструкция по установке и компонентам Vue slider

Введение

Vue slider — это удобный и гибко настраиваемый компонент для Vue.js, который позволяет быстро добавить настраиваемый слайдер (ползунок) в ваш проект. Такие слайдеры часто используются для выбора числовых значений или диапазонов (например, для фильтрации товаров по цене). Компонент легко интегрируется, обладает хорошей документацией и богатым набором опций для кастомизации интерфейса. Здесь я покажу, как пошагово установить Vue slider, подключить его к проекту, рассмотреть основные компоненты, их пропсы, методы и события с примером использования для каждой важной части.

Установка Vue slider

Подключение через npm

Если вы используете Vue CLI или любой сборщик модулей, оптимальным будет подключение через npm или yarn. Самым популярным слайдером считается пакет vue-slider-component, который поддерживает Vue 2 и 3.

Выполните команду для установки через npm:

npm install vue-slider-component --save

Или через yarn:

yarn add vue-slider-component

Подключение через CDN

Если вам нужен быстрый прототип либо нет сборщика модулей, можно использовать CDN:

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-slider-component/theme/default.css">

Такой подход удобен для примерами на CodePen или JSFiddle.

Импорт компонента

Теперь добавьте импорт и регистрацию компонента в своем файле.

Vue 2 (Options API): ```js import VueSlider from 'vue-slider-component' import 'vue-slider-component/theme/default.css'

export default { components: { VueSlider } } ```

Vue 3 (Composition API): ```js import { defineComponent } from 'vue' import VueSlider from 'vue-slider-component' import 'vue-slider-component/theme/default.css'

export default defineComponent({ components: { VueSlider } }) ```

Использование основного компонента

Теперь давайте разберем основной синтаксис вставки слайдера.

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

<script>
export default {
  data() {
    return {
      value: 45 // начальное значение
    }
  }
}
</script>

Здесь мы привязываем значение слайдера к переменной value через v-model. Любое смещение ползунка будет менять значение этой переменной.

Основные пропсы Vue slider

Слайдер обладает широким списком опций. Давайте разберём самые важные:

Пропс min и max

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

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

Пропс step

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

<vue-slider v-model="value" :step="5"></vue-slider>

Теперь значение изменяется с шагом в 5.

Пропс dot-size и height

Позволяют настраивать размер ползунка (dot) и высоту полосы.

<vue-slider v-model="value" :dot-size="20" :height="8"></vue-slider>

Пропс disabled

Делает слайдер неактивным.

<vue-slider v-model="value" :disabled="true"></vue-slider>

Теперь слайдер не реагирует на действия пользователя.

Пропс marks (отметки на ползунке)

Можно добавить визуальные отметки для ориентира пользователя.

<vue-slider v-model="value" :marks="{0: 'Низко', 50: 'Средне', 100: 'Высоко'}"></vue-slider>

Отметки появятся под соответствующими значениями.

Пропс tooltip (всплывающая подсказка)

Показывает/прячет подсказку при наведении/перемещении.

• show: всегда показывать
• none: не показывать
• hover: показывать при наведении (по умолчанию)

<vue-slider v-model="value" tooltip="show"></vue-slider>

Диапазонные значения и множественные ползунки

Слайдер отлично работает с диапазонами — это когда пользователь может выбрать не одну, а две границы (например, от какой суммы до какой).

<vue-slider v-model="range" :min="0" :max="100" :interval="true"></vue-slider>

data() {
  return {
    range: [20, 80]
  }
}

Если вы хотите реализовать два и более ползунка, достаточно передать массив значений в v-model.

Кастомизация внешнего вида

Vue slider позволяет настраивать внешний вид под дизайн проекта:

Тема оформления

По умолчанию компонент подключается с дефолтной темой, вы можете создать свой собственный стиль, изменяя параметры SCSS или CSS.

К примеру:

.vue-slider-dot {
  background: #007bff; /* Синий цвет ползунка */
}
.vue-slider-rail {
  background: #e9ecef; /* Цвет полосы */
}

Кастомные классы можно найти в документации по теме.

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

Один из мощных инструментов — named slots, дающие полный контроль над рендерингом элементов:

<vue-slider v-model="value">
  <template #dot="{ value }">
    <div class="my-dot">{{ value }}</div>
  </template>
</vue-slider>

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

Работа с событиями

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

• drag-start: начало перемещения
• drag-end: окончание перемещения
• change: изменение значения (по завершению)
• input: при любом изменении (аналог input)

Покажу пример обработки:

<vue-slider
  v-model="value"
  @drag-start="onStart"
  @change="onChange"
></vue-slider>

methods: {
  onStart(val) {
    // val - текущее значение
    console.log('Начало движения', val)
  },
  onChange(val) {
    console.log('Значение изменилось', val)
  }
}

Как видите, вы в любой момент можете отследить или модифицировать поведение слайдера, интегрируя его в более сложную бизнес-логику.

Валидация и обработка ошибок

В процессе разработки иногда нужно валидировать выбранное значение. Обычно проверки делают внутри родительского компонента, в котором хранится значение (v-model):

<vue-slider v-model="value"></vue-slider>
<span v-if="value < 20" class="error">Минимум 20</span>

Или наблюдайте за ползунком через watch:

watch: {
  value(newVal) {
    if (newVal < 10) {
      // Предотвращаем неправильные значения
      this.value = 10;
    }
  }
}

Так вы минимизируете ошибочные значения.

Расширенные настройки

Показать значения с помощью лейблов

Вы можете явно отобразить текущие значения, если tooltip выключен или нужен собственный способ:

<div>
  <vue-slider v-model="value"></vue-slider>
  <span>Текущее значение: {{ value }}</span>
</div>

Форматирование отображаемых значений

Иногда необходимо отображать форматированные значения, например, добавить знак валюты:

<vue-slider
  v-model="value"
  :formatter="value => value + ' ₽'"
></vue-slider>

Несколько независимых слайдеров

Можно размещать несколько ползунков на странице:

<div>
  <vue-slider v-model="volume"></vue-slider>
  <vue-slider v-model="brightness" :max="200"></vue-slider>
</div>

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

Сделать слайдер вертикальным просто:

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

Интеграция с формами

Один из частых сценариев — работа Vue slider внутри формы для отправки данных на сервер:

<template>
  <form @submit.prevent="submitForm">
    <vue-slider v-model="priceRange" :interval="true" :min="100" :max="5000"></vue-slider>
    <button type="submit">Применить</button>
  </form>
</template>

<script>
export default {
  data() {
    return { priceRange: [800, 3000] }
  },
  methods: {
    submitForm() {
      // Отправляется массив priceRange: [от, до]
      console.log('Выбранный диапазон:', this.priceRange)
    }
  }
}
</script>

Такой подход отлично подходит для фильтрации товаров, подбора параметров и т.д.

Адаптация и отзывчивый дизайн

Слайдер адаптивен по умолчанию. Для более сложной вёрстки (например, использование внутри flex-контейнера или грид-сетке) полезно указать ширину явно:

<vue-slider style="width: 70%"></vue-slider>

Или сделать ширину 100% для мобильных экранов:

.vue-slider {
  width: 100%;
  min-width: 200px;
}

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

Ленивая инициализация и SSR

Для серверного рендеринга или динамической подгрузки компонентов слайдер работает без проблем. Можно только учесть момент, что стили предварительно должны быть загружены через <link> или импорт в css.

Если компонент инициализируется в <keep-alive> или по условию, используйте <client-only> для Nuxt.js.

Лучшие практики и советы по использованию

• Для числа с большим количеством знаков используйте кастомный форматтер.
• Для диапазонных фильтров всегда указывайте interval.
• Используйте свой кастомный dot через slot для брендинга.
• Используйте событие change для триггера тяжелых операций, а не input.
• Не забывайте об accessibility: давайте aria-лейблы и подписи.

Частозадаваемые технические вопросы по теме статьи и ответы на них

1. Как сбросить значение слайдера к начальному через кнопку?

<button @click="value = startValue">Сбросить</button>
<vue-slider v-model="value"></vue-slider>

Значение сбросится на startValue (любое дефолтное).

2. Можно ли сделать слайдер только с дискретными заданными значениями (например, только 10, 30, 50)?

Используйте проп marks и обработайте значения:

<vue-slider
  v-model="value"
  :marks="{10:'10', 30:'30', 50:'50'}"
  :step="null"
  :data="[10,30,50]"
></vue-slider>

3. Как реализовать асинхронное обновление минимального и максимального значений?

Можно привязать значения min/max к переменным и менять их:

<vue-slider v-model="val" :min="dynamicMin" :max="dynamicMax"></vue-slider>

Меняйте dynamicMin и dynamicMax после загрузки данных.

4. Почему не работает v-model внутри v-for?

Если создаёте массив слайдеров циклом, используйте уникальный ключ:

<vue-slider v-for="item in items" :key="item.id" v-model="item.value"></vue-slider>

Тогда значения не будут конфликтовать.

5. Как контролировать точность ограниченного количества знаков после запятой?

Используйте форматтер:

<vue-slider
  v-model="value"
  :formatter="val => val.toFixed(2) + ' м'"
></vue-slider>

Два знака после запятой обеспечены.