Ползунок диапазона — это интерактивный элемент управления, который позволяет выбирать числовое значение или диапазон значений путём перемещения указателя вдоль шкалы. Этот инструмент особенно удобен для регулировки параметров в заданных пределах, таких как ценовой диапазон или количество единиц товара.
Базовая анатомия
Основу ползунка составляет трек, определяющий диапазон возможных значений. По этому треку перемещается бегунок, который можно захватить и перетащить. Активная часть трека, расположенная между начальной точкой и текущей позицией, обычно выделяется цветом. На шкале, если она есть, должны находиться метки основных значений.
Анатомия с метками
Для достижения точной настройки следует добавить числовые метки, показывающие пользователю ключевые значения шкалы, дополнительно можно включить поле с текущим значением, которое обновляется при перемещении бегунка. В случае выбора диапазона используются два бегунка, ограничивающие выбранный интервал.
Ползунок диапазона должен активно откликаться на взаимодействие, предоставляя максимально точный контроль и полноценную обратную связь.
Default
В обычном состоянии ползунок отображает текущее значение через положение бегунка. Трек и метки имеют нейтральные цвета, чтобы не отвлекать внимание от выбранного значения.
Hover
При наведении курсора бегунок слегка увеличивается или изменяет свой вид, сигнализируя о возможности взаимодействия. Может появляться всплывающая подсказка с точным значением.
Active
Во время перетаскивания бегунок визуально фиксирует захват, а активная часть трека динамически обновляется. Текущее значение может отображаться над бегунком для точной настройки.
Disabled
В неактивном состоянии ползунок сохраняет своё положение, но его визуальное восприятие изменяется: элементы становятся менее контрастными, что указывает на недоступность элемента.
