Slider

Компонент Slider в библиотеке Element Plus предназначен для выбора числового значения или диапазона значений с помощью ползунка. Он поддерживает как одиночное значение, так и диапазон, а также предоставляет гибкие настройки визуализации и взаимодействия.

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref(50)
    return { value }
  }
}
</script>

В этом примере создается простой слайдер с диапазоном от 0 до 100 и начальным значением 50. Связь с данными осуществляется через директиву v-model.

Настройка диапазона значений

Слайдер позволяет задавать минимальное и максимальное значения через свойства min и max. Для более точного управления шагом используется свойство step.

<el-slider v-model="value" :min="10" :max="200" :step="10"></el-slider>
  • min – минимальное значение.
  • max – максимальное значение.
  • step – шаг изменения значения при перемещении ползунка.

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

Диапазонные слайдеры

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

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const range = ref([20, 80])
    return { range }
  }
}
</script>
  • range – булевое свойство, включающее режим выбора диапазона.
  • v-model в этом случае принимает массив [minValue, maxValue].

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

Слайдер можно расположить вертикально для экономии горизонтального пространства или для специфических интерфейсов:

<el-slider
  v-model="verticalValue"
  :min="0"
  :max="100"
  vertical
>
</el-slider>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const verticalValue = ref(30)
    return { verticalValue }
  }
}
</script>
  • vertical – булевое свойство, меняющее ориентацию слайдера.
  • Для вертикальных слайдеров можно дополнительно задавать высоту через CSS.

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

Слайдер может показывать текущее значение в виде всплывающей подсказки. Свойство show-tooltip управляет видимостью подсказки:

<el-slider
  v-model="value"
  :min="0"
  :max="100"
  :show-tooltip="true"
>
</el-slider>
  • show-tooltip – булевое свойство. По умолчанию включено.
  • Можно настроить формат отображения через format-tooltip:
<el-slider
  v-model="value"
  :format-tooltip="val => val + '%'"
></el-slider>

Слайдер с метками (marks)

Для удобства восприятия можно добавить метки на слайдер:

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref(40)
    const marks = {
      0: '0%',
      25: '25%',
      50: '50%',
      75: '75%',
      100: '100%'
    }
    return { value, marks }
  }
}
</script>
  • Ключи объекта marks задают позицию на шкале.
  • Значения объекта – текстовые подписи, отображаемые на слайдере.
  • Метки можно комбинировать с диапазоном и вертикальной ориентацией.

Деактивация слайдера

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

<el-slider
  v-model="value"
  :disabled="true"
></el-slider>
  • disabled – булевое свойство, блокирующее взаимодействие с ползунком.
  • Можно комбинировать с визуальными стилями для индикации неактивного состояния.

События

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

  • change – вызывается при завершении изменения значения.
  • input – вызывается при каждом движении ползунка.
<el-slider
  v-model="value"
  @change="handleChange"
  @input="handleInput"
></el-slider>

<script>
export default {
  setup() {
    const value = ref(50)
    const handleChange = val => console.log('Final value:', val)
    const handleInput = val => console.log('Current value:', val)
    return { value, handleChange, handleInput }
  }
}
</script>

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

Кастомизация стилей

Слайдер поддерживает изменение цвета полосы и ползунка через CSS-переменные:

.el-slider__runway {
  background-color: #e0e0e0;
}
.el-slider__bar {
  background-color: #409eff;
}
.el-slider__button {
  border-color: #409eff;
}
  • .el-slider__runway – фон всей линии слайдера.
  • .el-slider__bar – заполненная часть линии.
  • .el-slider__button – сам ползунок.

Также можно использовать height или width для адаптации размера слайдера под дизайн.

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

Слайдер легко интегрируется с компонентами Form и FormItem для валидации:

<el-form :model="form">
  <el-form-item label="Уровень громкости">
    <el-slider v-model="form.volume" :min="0" :max="100"></el-slider>
  </el-form-item>
</el-form>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const form = reactive({ volume: 50 })
    return { form }
  }
}
</script>
  • Валидация выполняется на уровне формы через стандартные правила Element Plus.
  • Полезно для форм с динамическими параметрами и настройками.
Оглавление