Слайдер диапазона выбирает одно значение или две границы перетаскиванием ручки
по шкале. Подходит для приблизительной настройки цены, громкости или
расстояния с известными пределами; когда важно точное число, добавьте рядом
поле количества или
текстовое поле.
Минимальную разметку показывает пример выше: пустой
<div class="sf-range-slider"> с настройками в атрибутах data-* и
доступным именем. Шкалу, заполнение и ручки строит скрипт компонента; он
находит слайдеры по .sf-range-slider.
data-min и data-max — пределы шкалы (по умолчанию 0 и 100),
data-start — начальное значение, для двух ручек — два числа через запятую.
data-step — шаг; без него значение меняется непрерывно.
Доступное имя — aria-label или aria-labelledby на блоке; скрипт
переносит его на ручки. Для двух ручек задайте data-lower-label и
data-upper-label.
Текущее значение скрипт пишет в data-value на блоке.
Направление шкалы берётся при подключении: при письме справа налево минимум
стоит справа.
Варианты
Одно значение или диапазон
Без data-multiple у слайдера одна ручка. data-multiple="true" с двумя
числами в data-start даёт две ручки — нижнюю и верхнюю границу;
data-margin задаёт наименьшее расстояние между ними.
data-label выбирает, как ручка показывает значение: none (по умолчанию) —
без подписи, text — постоянной подписью, tooltip — подсказкой.
data-prefix и data-suffix добавляют к значению единицы. Подписи не
выходят за шкалу, а у двух близких ручек сливаются в одну.
У одной ручки шкала заполняется от минимума до ручки; data-connect="upper"
заполняет её от ручки до максимума — для настроек вида «не меньше». У двух
ручек заполнен отрезок между ними.
data-step задаёт шаг, в том числе в экспоненциальной записи (1e-3); число
знаков подписи берётся из шага. data-decimals меняет только видимую
точность: значение в событиях и для вспомогательных технологий остаётся
полным.
По умолчанию ручка получает фокус и двигается стрелками, Home и End.
data-keyboard="false" убирает ручку из порядка фокуса — только если
приложение даёт другой способ ввести то же значение с клавиатуры, например
поле рядом.
Недоступность задаёт атрибут на блоке, фокус и перетаскивание — сам
компонент. Наведение компонент показывает сам.
Недоступен
Атрибут disabled или класс disabled на блоке приглушает шкалу и ручки;
ручки получают aria-disabled="true" и выходят из порядка фокуса. Скрипт
читает недоступность при подключении: чтобы включить или выключить её позже,
переподключите слайдер через SF.RangeSlider.unbind и SF.RangeSlider.bind.
При переходе клавишей Tab ручка получает кольцо фокуса по :focus-visible.
Ручку строит скрипт, поэтому в примере класс focus-visible ставит на неё
небольшой скрипт.
// The handle is built by the component script, so the focus ring is shown by// putting the focus-visible class on it once it exists.constshow= () => {
consthandle= document.querySelector('.sf-range-slider-handle');
if (handle) handle.classList.add('focus-visible');
elserequestAnimationFrame(show);
};
show();
Доступность
Каждая ручка — role="slider" с aria-valuemin, aria-valuemax,
aria-valuenow и aria-valuetext с префиксом и суффиксом. У двух ручек
границы каждой учитывают соседнюю ручку и data-margin.
Слайдеру нужно доступное имя: aria-label или aria-labelledby на блоке,
а у двух ручек — data-lower-label и data-upper-label.
Стрелки меняют значение на шаг (при письме справа налево стрелки
влево-вправо меняются местами), Home и End ставят ручку на границу.
Слайдер не подходит для точного ввода: дайте рядом поле.
При prefers-reduced-motion ручки двигаются без анимации; в режиме
принудительных цветов шкала и ручки рисуются системными цветами.
JavaScript
Слайдер сообщает о движении событиями на блоке; все всплывают. detail
содержит value (число или массив из двух чисел), values (всегда массив),
handle (номер ручки) и component (блок).
Событие
Когда
sf-range-slider-start
ручку начали двигать
sf-range-slider-update
значение меняется во время движения
sf-range-slider-end
движение закончено
sf-range-slider-set, sf-range-slider-change
значение установлено
change
значение установил человек; setValue его не создаёт
