Slider

Компонент Slider в Naive UI представляет собой интерактивный элемент управления, позволяющий пользователю выбирать числовое значение из заданного диапазона. Он широко используется в интерфейсах для регулировки громкости, яркости, масштабирования, настройки фильтров и других параметров, где требуется плавное изменение значения.

Ключевые свойства Slider:

  • v-model:value – двусторонняя привязка к числовому значению слайдера.
  • min и max – определяют минимальное и максимальное значения диапазона.
  • step – шаг изменения значения при перемещении ползунка.
  • disabled – блокировка элемента для предотвращения взаимодействия.
  • range – позволяет использовать двойной ползунок для выбора диапазона значений.
  • show-tooltip – управление отображением подсказки с текущим значением ползунка.

Простая реализация

Простейший пример использования Slider выглядит следующим образом:

<template>
  <n-slider v-model:value="volume" :min="0" :max="100" :step="1" />
</template>

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

const volume = ref(50);
</script>

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

Двойной ползунок (Range Slider)

Для выбора диапазона значений используется свойство range. Оно принимает массив из двух чисел и позволяет пользователю задавать нижнюю и верхнюю границу диапазона.

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

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

const rangeValues = ref([20, 80]);
</script>

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

  • Можно задавать шаг (step) для обоих ползунков.
  • Значения ползунков можно синхронизировать с другими компонентами интерфейса, например, с полями ввода чисел.

Настройка подсказки (Tooltip)

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

<template>
  <n-slider 
    v-model:value="brightness" 
    :min="0" 
    :max="100" 
    show-tooltip
  />
</template>

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

const brightness = ref(75);
</script>

Для более сложных сценариев можно использовать слот tooltip и полностью кастомизировать отображение подсказки:

<template>
  <n-slider v-model:value="customValue" :min="0" :max="100">
    <template #tooltip="{ value }">
      <span>{{ value }}%</span>
    </template>
  </n-slider>
</template>

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

const customValue = ref(60);
</script>

Вертикальное отображение

Слайдер можно повернуть вертикально с помощью свойства vertical. Это полезно для регулировки уровней, например, громкости или температуры:

<n-slider v-model:value="temperature" :min="0" :max="30" vertical />

События и реактивность

Компонент Slider поддерживает ряд событий:

  • @update:value – срабатывает при каждом изменении значения.
  • @drag-end – вызывается после завершения перемещения ползунка.
  • @drag-start – срабатывает при начале перетаскивания.

Пример использования событий:

<n-slider 
  v-model:value="progress" 
  @update:value="onUpdate" 
  @drag-end="onDragEnd" 
/>

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

const progress = ref(40);

function onUpdate(val) {
  console.log('Новое значение:', val);
}

function onDragEnd(val) {
  console.log('Перетаскивание завершено на значении:', val);
}
</script>

Стилизация и кастомизация

Slider предоставляет гибкие возможности для стилизации:

  • Ползунок (thumb) – можно изменить цвет, размер и форму через CSS-переменные или слоты.
  • Трек (rail) – позволяет настраивать фоновую линию, длину активной части и цвет.
  • Полоса прогресса (fill) – можно кастомизировать цвет и градиенты для визуального выделения диапазона.

Пример изменения цвета ползунка:

<n-slider v-model:value="level" :rail-style="{ backgroundColor: '#eee' }" :fill-style="{ backgroundColor: '#409EFF' }" />

Интеграция с другими элементами

Slider легко интегрируется с другими элементами Naive UI, такими как InputNumber, что позволяет пользователю задавать значение как перетаскиванием ползунка, так и прямым вводом числа:

<n-space vertical>
  <n-slider v-model:value="size" :min="0" :max="100" />
  <n-input-number v-model:value="size" :min="0" :max="100" />
</n-space>

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

const size = ref(50);
</script>

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

Использование с динамическими диапазонами

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

<n-slider v-model:value="dynamicValue" :min="minValue" :max="maxValue" :step="stepValue" />

<script setup>
import { ref, computed } from 'vue';

const minValue = ref(0);
const maxValue = ref(200);
const stepValue = ref(5);
const dynamicValue = ref(50);
</script>

Такой подход позволяет адаптировать компонент под изменяющиеся условия интерфейса.

Вывод

Компонент Slider в Naive UI — это мощный и гибкий инструмент для управления числовыми значениями. Его возможности включают одноползунковый и диапазонный режим, вертикальное отображение, подсказки, кастомизацию стилей и интеграцию с другими компонентами. Эти функции делают Slider незаменимым элементом для создания интуитивно понятных и динамичных пользовательских интерфейсов в приложениях на Vue.js.

Оглавление