Слайдер

Контракт

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

Клавиатура, роль slider и aria-valuenow — от платформы. Руками нужен только aria-valuetext там, где число само по себе непонятно: «6 агентов» вместо «6».

Цель нажатия у бегунка 14px, ниже 24px по WCAG 2.5.8: нажатие принимает дорожка на всю высоту --size-icon, а положение достижимо с клавиатуры. Там, где слайдер — единственный способ задать значение, рядом ставится числовое поле: точность не его работа.

Устройство

Дорожка заполнена до бегунка. Без заливки слайдер сообщает только «здесь есть слайдер»: положение точки на ровной полосе приходится оценивать глазомером, тогда как доля читается формой. Пустая часть берёт --track плюс внутренний хайрлайн, заполненная — --accent-mark.

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

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

Заливка сделана двумя сплошными зонами с общей границей, а не проприетарным ::-moz-range-progress — у него нет аналога в Chromium, и дорожка заполнялась бы в одном браузере из двух. Остановки совпадают, перехода между цветами нет, поэтому запрет на градиенты это не нарушает: тот же приём, что у заливки спарклайна.

Долю держит --fill. CSS не умеет прочитать value у input, поэтому её считает instrument.js — но начальное значение объявляет разметка, и без скрипта дорожка показывает то, с чем страница пришла, а не ноль.

Поведение

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

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

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

JS

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

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

Что делает instrument.js

Держит в <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" style="--fill: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" style="--fill:80%"
         id="thr" aria-describedby="thr-hint">
  <span class="inst-field-hint" id="thr-hint">Ниже порога агент запрашивает подтверждение</span>
</div>

API

Связанное

Числовое поле инспектораТекстовое полеМера