---
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/en/llms.txt

# Interactive elements

## Slider {#slider}

The [slider](https://divkit.tech/docs/en/concepts/divs/2/div-slider.md) element is a scale that lets you select values within a certain range. The scale can have one or two indicators.

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

{% cut "View an interactive example" %}

<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 {#scale}

The scale style is configured in the `thumb_style` field.

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

{% cut "View an interactive example" %}

<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 %}


You can change the scale's track style in the following fields:

- `track_active_style`: Sets the left-side track style for scales with one indicator, or the center-aligned track style for scales with two indicators.
- `track_inactive_style`: Sets the style for the rest of the scale.

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

{% cut "View an interactive example" %}

<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 %}


### Indicator {#thumb}

You can add a second indicator using the `thumb_secondary_style` parameter.

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

{% cut "View an interactive example" %}


<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 %}


To display the currently selected value on the indicator, set the `thumb_text_style` field. You can set the text style for the second indicator in the `thumb_secondary_text_style` field.

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

{% cut "View an interactive example" %}


<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 %}


You can track changes in the value of indicators and perform actions when changes occur:

- `thumb_value_changed_actions`: Actions triggered when the first indicator changes.
- `thumb_value_secondary_changed_actions`: Actions triggered when the second indicator changes.

The indicator values can be accessed via `@{this.thumb_value}` and `@{this.thumb_secondary_value}` in the action description.

In the following example, text transparency changes as the indicator moves:

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

{% cut "View an interactive example" %}


<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 %}


### Ticks {#tick-marks}

You can add ticks to your slider scale:

- `tick_mark_active_style`: Tick style for the selected range.
- `tick_mark_inactive_style`: Tick style outside the selected range.

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

{% cut "View an interactive example" %}


<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: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->