Интерактивные элементы
Слайдер
Элемент 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.