Интерактивные элементы

Слайдер

Элемент slider представляет собой шкалу с возможностью выбора значений в диапазоне. Шкала может иметь один или два указателя.

Посмотреть интерактивный пример

Шкала

Стиль шкалы настраивается в поле thumb_style.

Посмотреть интерактивный пример

Изменить стиль трека шкалы можно в следующих полях:

  • track_active_style — для шкалы с одним указателем определяет стиль трека слева от указателя, для шкалы с двумя указателями — стиль центрального трека;
  • track_inactive_style — стиль остальной части шкалы.

Посмотреть интерактивный пример

Указатель

Добавьте второй указатель с помощью параметра thumb_secondary_style.

Посмотреть интерактивный пример

Чтобы отобразить текущее выбранное значение на указателе, установите поле thumb_text_style. Стиль текста второго указателя настройте в поле thumb_secondary_text_style.

Посмотреть интерактивный пример

Можно отслеживать изменения значения указателей и совершать действия при изменениях:

  • thumb_value_changed_actions — действия при изменении первого указателя;
  • thumb_value_secondary_changed_actions — действия при изменении второго указателя.

В описании действий к значениям указателей можно обратиться через @{this.thumb_value} и @{this.thumb_secondary_value}.

В примере при движении указателя меняется прозрачность текста:

Посмотреть интерактивный пример

Засечки

На шкалу слайдера можно нанести засечки:

  • tick_mark_active_style — стиль засечек на выбранном диапазоне;
  • tick_mark_inactive_style — стиль засечек вне выбранного диапазона.

Посмотреть интерактивный пример

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Предыдущая
Следующая