Слайдер

Использование

<input class="inst-slider" type="range" min="0" max="100" value="72"
       aria-label="Плотность растительности">

Слайдер тянется на 100% ширины контейнера. В ряду с другими элементами дайте ему явный flex и min-inline-size: 0, иначе он вытолкнет соседа на следующую строку.

Когда использовать

Устройство

Бегунок несёт кольцо цвета поверхности и остаётся различимым, когда наезжает на собственную дорожку. Дорожка берёт --track плюс внутренний хайрлайн: её протяжённость показывает граница, а не цвет заливки, поэтому дорожка может оставаться светлой.

Нажатие увеличивает бегунок до 1.15 — отклик надо почувствовать, а не разглядывать.

Заполненной части дорожки у слайдера кита нет: она требует либо проприетарного ::-moz-range-progress без аналога в Chromium, либо градиента, пересчитываемого скриптом на каждом шаге. Положение бегунка и есть значение.

Поведение

Вывод значения

<div class="inst-cluster">
  <input class="inst-slider" type="range" min="0" max="16" value="6" step="1"
         id="sl" aria-label="Параллельных агентов">
  <output for="sl">6</output>
</div>

Пример живой: потяните бегунок — число меняет кит.

<output for> связывает число со слайдером семантически, поэтому дублировать его в aria-label не нужно — и не следует: подпись, меняющаяся на каждом шаге, превращает объявление в шум.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Пример в разделе «Вывод значения» живой: потяните бегунок, число рядом меняет кит.

Держит в <output for> текущее значение бегунка — при вводе и при загрузке страницы. Связь уже объявлена атрибутом for; синхронизировать её вручную значило бы писать одну и ту же строку в каждом приложении.

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

События

Своих нет — читайте нативный input.

sl.addEventListener('input', (e) => preview.setAgents(+e.target.value));

Методы

refresh(root) проставляет числа заново. Нужно, если разметка пришла в обход наблюдателя — например, в тесте.

Композиции

В строке свойства

<div class="inst-prop">
  <span class="inst-prop-label" title="Плотность растительности">Плотность</span>
  <span class="inst-prop-control">
    <input class="inst-slider" type="range" min="0" max="100" value="72"
           aria-label="Плотность растительности">
  </span>
</div>

С подписью и подсказкой

<div class="inst-field">
  <label class="inst-label" for="thr">Порог уверенности</label>
  <input class="inst-slider" type="range" min="0" max="100" value="80" step="5"
         id="thr" aria-describedby="thr-hint">
  <span class="inst-field-hint" id="thr-hint">Ниже порога агент запрашивает подтверждение</span>
</div>

Правила

Доступность

API

Связанное

Числовое поле Текстовое поле Переключатели Форма Мера Панель