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

Введение

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

Создание интерактивных слайдеров — отличный способ улучшить визуальное восприятие контента на вашем сайте. Vue slider позволяет легко интегрировать такие компоненты, предоставляя пользователям удобный интерфейс навигации. Если вы хотите детальнее погрузиться в Vue.js, изучить основы, компоненты, свойства и события, реактивность, жизненный цикл, а также научиться работать с Vue Router и Pinia, приходите на наш большой курс Vue.js 3, Vue Router и Pinia. На курсе 173 уроков и 21 упражнение, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Установка 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):

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  }
}

Vue 3 (Composition API):

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-лейблы и подписи.

Понимание того, как эффективно устанавливать и использовать Vue slider, является важным навыком для любого разработчика. Изучение компонентов, работы с жизненным циклом, Vue Router и Pinia поможет вам создать более функциональные и удобные веб-приложения. В первых 3 модулях курса Vue.js 3, Vue Router и Pinia уже доступно бесплатное содержание — начните погружаться в мир Vue.js и слайдеров прямо сейчас.

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

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>

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