SwSlider
Компонент SwSlider — слайдер с одним или несколькими ползунками: число в v-model → 1 бегунок, массив из n чисел → n бегунков. Значения в массиве сортируются при перетаскивании; тултип следует за тянущимся ползунком при перескоке. Без CSS-lag на left/top во время drag.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
vertical | Boolean | false | Вертикальная ориентация (min снизу, max сверху). |
class | String | `` | Пользовательский CSS-класс. |
size | String | `` | Размер бегунка: 'large', 'small'. |
min | Number | 0 | Минимум. |
max | Number | 100 | Максимум. |
step | Number | 1 | Шаг. |
show-value | Boolean | false | Всплывающее значение при наведении / drag. |
track-color | Array | [] | Цвета сегментов трека между thumb; пустой — --sw-color-primary. |
Сегменты: число — 0 → thumb; массив — thumb₀ → thumb₁. Если цветов меньше — последний повторяется.
Слоты / Slots
Default - содержимое бегунка (index, value в слот-пропсах).
Модель / Model
v-model — Number или Number[]
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const sliderValue = ref(40)
const sliderMulti = ref([15, 35, 60, 85])
</script>
<sw-slider v-model="sliderValue" :min="0" :max="100" show-value />
<sw-slider
v-model="sliderMulti"
:min="0"
:max="100"
show-value
:track-color="['var(--sw-color-success)', 'var(--sw-color-warning)', 'var(--sw-color-danger)']"
/>