SwSlider
Компонент SwSlider представляет собой Мультислайдер с возможностью настройки внешнего вида ползунка. Количество ползунков зависит от входных данных 1 - число. n - массив из n чисел.
- отображения значений в виде всплывающих подсказок при наведении на бегунки:
- Поддержка как горизонтальной, так и вертикальной ориентации
- Адаптивное позиционирование подсказок в зависимости от доступного пространства
- Поддержка сенсорных устройств (touch events)
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
vertical | Boolean | false | Вертикальная ориентация слайдера. |
class | String | sw-switch | Добавляет пользовательский CSS-класс к компоненту. |
size | String | small | Размер бегунка: 'large', 'small'. |
min | Number | 0 | Минимальное значение переменной. |
max | Number | 100 | Максимальное значение переменной. |
step | Number | 1 | Шаг в приросте переменной. |
show-value | Boolean | false | Добавляет всплывающее окно с текущим значением. |
Слоты / Slots
Default - текст, картинка, svg - содержимое бегунка.
Модель / Model
model - значение слайдера (число, массив чисел)
Пример использования / Example Usage
<script>let model = [5, 50]</script>
<sw-slider
v-model="model"
:min="0"
:max="100"
:step="5"
show-value
class="custom-class"
vertical
>
<svg-icon icon-class="component" />
</sw-slider>