---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/clickables.md
  - https://divkit.tech/docs/ru/concepts/clickables.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

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

## Слайдер {#slider}

Элемент [slider](https://divkit.tech/docs/ru/concepts/divs/2/div-slider.md) представляет собой шкалу с возможностью выбора значений в диапазоне. Шкала может иметь один или два указателя.

![](../_images/create-card/slider.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_1.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


### Шкала {#scale}

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

![](../_images/create-card/slider-with-customized-thumb.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_2.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


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

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

![](../_images/create-card/slider-track-style.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_3.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


### Указатель  {#thumb}

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

![](../_images/create-card/slider-with-two-thumbs.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_4.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


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

![](../_images/create-card/slider-with-thumb-text.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_5.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


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

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

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

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

![](../_images/create-card/slider-thumb-actions.gif =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_6.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


### Засечки {#tick-marks}

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

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

![](../_images/create-card/slider-with-tick-marks.png =360x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/clickables_7.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}


<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

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



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->