Описание компонента Slider

Назначение компонента

Компонент Slider (ползунок) позволяет пользователям выбирать значение или диапазон значений путем перемещения элементов управления вдоль трека. Используется для:

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

Структура компонента

Компонент состоит из:

Контейнера слайдера (.sf-slider)
Элементов ввода (input[type="range"])
Визуального трека (.sf-slider-track)
Ползунков (.sf-slider-handle)
Отображаемых значений (.sf-slider-value)

Классы и их назначение

Класс	Назначение
`.sf-slider`	Основной контейнер слайдера
`.sf-slider-handle`	Визуальное представление ползунка
`.sf-slider-handle-container`	Контейнер для ползунка и подписи
`.sf-slider-track`	Визуальный трек слайдера
`.sf-slider-value`	Отображение текущего значения
`.sf-slider-value--first`	Стиль для первого значения
`.sf-slider-value--second`	Стиль для второго значения
`.sf-slider-note`	Подпись к ползунку
`.sf-slider-note-background`	Подпись с фоновым оформлением

Таблица CSS-переменных

Переменная	Описание	Значение по умолчанию
`--sf-slider-handle--background-color`	Цвет обводки ползунка	`var(--sf-primary)`
`--sf-slider-handle--diameter`	Диаметр ползунка	`var(--sf-c2)`
`--sf-slider-handle--border-width`	Толщина обводки ползунка	`var(--sf-a5)`

Особенности реализации

Кастомизация ползунков:

Стилизация через псевдоэлементы ::-webkit-slider-thumb и ::-moz-range-thumb
Разные состояния (hover, focus) с изменением размера и толщины обводки

Динамическое отображение:

Значения обновляются при перемещении ползунков
Активная часть трека подсвечивается между ползунками

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


<!-- Базовый слайдер с диапазоном -->
<div class="sf-slider">
  <input class="sf-slider-input--first" type="range" min="1" max="100" value="20" id="slider-1">
  <input class="sf-slider-input--second" type="range" min="1" max="100" value="70" id="slider-2">
  <div class="sf-slider-track"></div>
  <div class="sf-slider-value sf-slider-value--first" id="slider-1-value">20</div>
  <div class="sf-slider-value sf-slider-value--second" id="slider-2-value">80</div>
</div>

<!-- Второй экземпляр базового слайдера -->
<div class="sf-slider">
  <input class="sf-slider-input--first" type="range" min="1" max="100" value="20" id="slider-1">
  <input class="sf-slider-input--second" type="range" min="1" max="100" value="70" id="slider-2">
  <div class="sf-slider-track"></div>
  <div class="sf-slider-value sf-slider-value--first" id="slider-1-value">20</div>
  <div class="sf-slider-value sf-slider-value--second" id="slider-2-value">80</div>
</div>

<!-- Слайдер с оформленной границей -->
<div class="sf-slider slider-border">
  <input class="sf-slider-input--first" type="range" min="1" max="100" value="20" id="slider-11">
  <input class="sf-slider-input--second" type="range" min="1" max="100" value="70" id="slider-12">
  <div class="sf-slider-track"></div>
  <div class="sf-slider-value sf-slider-value--first">20</div>
  <div class="sf-slider-value sf-slider-value--second">80</div>
</div>

Изменить статью