> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/slaider-znachenii.md).

# Слайдер значений

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FySulthXcO1v4EWQrTQcY%2Frange-slider.png?alt=media\&token=556ffe5a-a7f0-4c7e-b056-18ddb523e1b9)

Компонент для создания выбора диапазона значений для формы.

**Свойства:**

* *<mark style="color:purple;">minValue</mark>* - минимальное значение, которое можно установить слайдером
* *<mark style="color:purple;">maxValue</mark>* - максимальное значение, которое можно установить слайдером
* *<mark style="color:purple;">selectedMin</mark>* - выбранное значение по умолчанию. При установленном значении *<mark style="color:purple;">inputMode</mark>* - **range**, значение будет установлено как минимальное.
* *<mark style="color:purple;">selectedMax</mark>* - максимальное значение установленное по умолчанию. При установленном значении *<mark style="color:purple;">inputMode</mark>* - **single** не будет отображаться.
* *<mark style="color:purple;">step</mark>* - шаг с которым будет меняться значение при перемещении слайдера
* *<mark style="color:purple;">suffix</mark>* - текстовая подсказка рядом со значением, например это могут быть единицы измерения %, руб., и т.д.&#x20;
* *<mark style="color:purple;">thumbColor</mark>* - цвет рукоятки слайдера
* *<mark style="color:purple;">inputMode</mark>* - режим работы слайдера. Содержит следующие значения:
  * **single (по умолчанию)** - выбор одного значения
  * **range** - выбор минимального и максимального значения

{% hint style="info" %}
Значения слайдера *<mark style="color:purple;">minValue</mark>*, *<mark style="color:purple;">maxValue</mark>*, *<mark style="color:purple;">selectedMin</mark>*, *<mark style="color:purple;">selectedMax</mark>*, *<mark style="color:purple;">step</mark>* - необходимо задавать числом для корректной работы
{% endhint %}

**События:**

* *<mark style="background-color:purple;">onChange</mark>* - событие срабатывает при перемещении слайдера и изменения значения