Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add new version of slider component documentation
Browse files Browse the repository at this point in the history
vvtimofeev committed Nov 25, 2024
1 parent 576d130 commit 8871b03
Showing 2 changed files with 178 additions and 84 deletions.
139 changes: 93 additions & 46 deletions src/components/Slider/README-ru.md
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ LANDING_BLOCK-->

### Слайдер диапазона

Представляет собой слайдер с двумя ползунками для выбора диапазона. Для его использования установите `defaultValue` (для неконтролируемого слайдера) или `value` (для контролируемого) в виде массива.
Представляет собой слайдер с двумя ползунками для выбора диапазона. Для его использования необходимо задать `defaultValue` (для неконтролируемого компонента) или `value` (для контролируемого компонента) в виде массива.

<!--LANDING_BLOCK
<ExampleBlock
@@ -58,9 +58,9 @@ LANDING_BLOCK-->

## Состояния

### `Disabled`
### `Disabled` (отключен)

Состояние `Slider`, при котором пользователь не может взаимодействовать с данным компонентом:
Состояние `Slider`, при котором пользователь не может взаимодействовать с компонентом.

<!--LANDING_BLOCK
<ExampleBlock
@@ -80,9 +80,9 @@ LANDING_BLOCK-->

<!--/GITHUB_BLOCK-->

### `Error`
### `Error` (ошибка)

Состояние `Slider`, которое указывает на некорректный ввод данных пользователем. Для изменения внешнего представления компонента `Slider` примените свойство `validationState`, задав ему значение `"invalid"`. Опционально можно задать текст сообщения об ошибке через свойство `errorMessage`. Он будет отображаться под слайдером.
Состояние `Slider`, которое указывает на некорректный ввод данных пользователем. Для изменения внешнего представления `Slider` примените свойство `validationState`, задав ему значение `"invalid"`. Дополнительно через свойство `errorMessage` можно добавить текст сообщения, который будет отображаться под компонентом.

<!--LANDING_BLOCK
<ExampleBlock
@@ -107,7 +107,7 @@ LANDING_BLOCK-->

## Размер

Размер `Slider` можно настроить с помощью свойства `size`. Размер по умолчанию — `m`.
Для изменения размера `Slider` используйте свойство `size`. Размер по умолчанию — `m`.

<!--LANDING_BLOCK
<ExampleBlock
@@ -168,7 +168,7 @@ LANDING_BLOCK-->

### `Step` (шаг)

Свойство `step` определяет шаги приращения и уменьшения в диапазоне минимального и максимального значений, т.е. на сколько изменяется значение при одном перемещении слайдера.
Свойство `step` компонента `Slider` задает величину шага между минимальным и максимальным значениями. Оно контролирует изменение значения при перемещении ползунка.

<!--LANDING_BLOCK
<ExampleBlock
@@ -190,96 +190,143 @@ LANDING_BLOCK-->

### Метки

Свойство `marksCount` задает количество визуальных меток на слайдере, указывающих на разные значения в диапазоне от минимума до максимума. Данное свойство делает слайдер более удобным для пользователя и улучшает его визуальное оформление, особенно в тех случаях, когда необходимо обозначить конкретные интервалы. Значение по умолчанию для `marksCount` — 2 (минимальное и максимальное значения). При необходимости можно установить более высокое значение.
Свойство `marks` задает количество визуальных меток компонента `Slider`, указывающих на разные значения в диапазоне от минимума до максимума. Данное свойство делает слайдер более удобным для пользователя и улучшает его визуальное оформление, особенно в тех случаях, когда необходимо обозначить конкретные интервалы. Значение по умолчанию — 2 (`min` и `max`). Его можно использовать двумя способами:

> Значение метки можно выбрать, даже если оно не соответствует шагу (`step`).
- Для задания количества визуальных меток на слайдере:
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marks={11} />
`}
>
<UIKitExamples.SliderExample marks={11} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider marks={11} />
```

<!--/GITHUB_BLOCK-->

- Для указания массива значений меток на слайдере:

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marksCount={11} />
<Slider marks={[0, 50, 100]} />
`}
>
<UIKitExamples.SliderExample marksCount={11} />
<UIKitExamples.SliderExample marks={[0, 50, 100]} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider marksCount={11} />
<Slider marks={[0, 50, 100]} />
```

<!--/GITHUB_BLOCK-->

### Доступные значения
Если в свойстве `marks` указать `0` или пустой массив (`[]`), то все метки компонента `Slider` будут скрыты.

Свойство `availableValues` используется для определения конкретных значений, которые может обрабатывать слайдер, в отличие от непрерывного диапазона. Это особенно полезно в случаях, когда выбор возможен только из заранее определенных дискретных значений. `availableValues` позволяет задать массив чисел, представляющих собой те значения, которые пользователи могут выбрать при работе с компонентом `Slider`.
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marks={0} />
`}
>
<UIKitExamples.SliderExample marks={0} />
</ExampleBlock>
LANDING_BLOCK-->

> Свойство `availableValues` переопределяет `min`, `max`, `marksCount` и `step` (если они применяются одновременно); в этом случае слайдер будет использовать значения из указанного массива, а не непрерывный диапазон.
<!--GITHUB_BLOCK-->

```tsx
<Slider marks={0} />
```

<!--/GITHUB_BLOCK-->

> Значение метки можно выбрать, даже если оно не соответствует шагу (`step`).
Формат отображения значений меток можно изменить с помощью свойства `marksFormat`.

#### Определение доступных значений

Установка свойства `step` в `null` позволяет задать конкретные значения, которые будут доступны на слайдере, вместо непрерывного диапазона. Это особенно полезно в случаях, когда выбор возможен только из заранее определенных дискретных значений. При такой настройке свойства `min`, `max` и `marks` позволяют задать массив чисел, представляющих собой те значения, которые пользователи могут выбрать при работе с компонентом `Slider`.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>
`}
>
<UIKitExamples.SliderExample availableValues={[10, 20, 50, 55, 65, 80]} />
<UIKitExamples.SliderExample marks={[10, 20, 50, 55, 65, 80]} step={null}/>
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null} />
```

<!--/GITHUB_BLOCK-->

## Tooltip
## Тултип

Свойство `hasTooltip` является булевым атрибутом, который позволяет включать и отключать отображение всплывающей подсказки с текущим значением при перемещении слайдера пользователем.
Свойство `tooltipDisplay` в компоненте `Slider` управляет поведением отображения тултипа с текущим значением при взаимодействии пользователя со слайдером. Значение `auto` позволяет отображать тултип только при наведении курсора на ползунок компонента `Slider` или получении компонентом фокуса.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider hasTooltip={true} />
<Slider tooltipDisplay="on" />
`}
>
<UIKitExamples.SliderExample hasTooltip={true} />
<UIKitExamples.SliderExample tooltipDisplay="on" />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider hasTooltip={true} />
<Slider tooltipDisplay="on" />
```

<!--/GITHUB_BLOCK-->

Формат отображения значения тултипа можно изменить с помощью свойства `tooltipFormat`. Если не указать `tooltipformat`, то для отображения значения в тултипе будет использовано свойство `marksFormat`.

## Свойства

| Имя | Описание | Тип | Значение по умолчанию |
| :----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-------------------: |
| apiRef | Ссылка на свойства компонента `Slider`, отвечающие за получение и потерю фокуса. | `RefObject<SliderRef>` | |
| autoFocus | Атрибут `autofocus` для контрола. | `boolean` | |
| [availableValues](#available-values) | Задает массив доступных значений для слайдера. | `number[]` | |
| className | Имя класса обертки контрола. | `string` | |
| debounceDelay | Определяет задержку (в миллисекундах) перед вызовом функции обработки. | `number` | `0` |
| [defaultValue](#slider-variants) | Значение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. | `number` `[number, number]` | `0` |
| [disabled](#disabled) | Указывает на то, что пользователь не может взаимодействовать с контролом. | `boolean` | `false` |
| [errorMessage](#error) | Отображаемое сообщение об ошибке. | `string` | |
| [hasTooltip](#tooltip) | Включает или отключает отображение всплывающей подсказки с текущим значением. | `boolean` | `false` |
| [marksCount](#marks) | Количество текстовых меток под слайдером, которые делят диапазон на равные части. Возможные значения: 2 и более. Свойство игнорируется, если задано `availablevalues`. | `number` | `2` |
| [max](#min-and-max-value) | Максимальное значение компонента. | `number` | `100` |
| [min](#min-and-max-value) | Минимальное значение компонента. | `number` | `0` |
| onBlur | Срабатывает, когда контрол теряет фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| onUpdate | Срабатывает, когда пользователь изменяет значение слайдера. Передает событие изменения в качестве аргумента обратного вызова. | `((value: number \| [number, number]) => void)` | |
| onUpdateComplete | Активируется при срабатывании `ontouchend` или `onmouseup`. Передает событие изменения в качестве аргумента обратного вызова. | `((value: number \| [number, number]) => void)` | |
| onFocus | Срабатывает, когда контрол получает фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| [size](#size) | Размер контрола. | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| [step](#step) | Шаги приращения и уменьшения при перемещении слайдера. Свойство игнорируется, если задано `availablevalues`. | `number` | `1` |
| tabIndex | Атрибут `tabIndex` для контрола. | `number` `[number, number]` | |
| [validationState](#error) | Состояние валидации. | `"invalid"` | |
| [value](#slider-variants) | Значение контрола. | `number` `[number, number]` | |
| Имя | Описание | Тип | Значение по умолчанию |
| :------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-------------------: |
| apiRef | Ссылка на свойства `focus` and `blur` компонента `Slider`. | `RefObject<SliderRef>` | |
| autoFocus | Атрибут `autofocus` для контрола. | `boolean` | |
| [availableValues](#define-available-values) | Устаревшее свойство; вместо него используйте `marks` и `step === null`. Задает массив доступных значений для слайдера. | `number[]` | |
| className | Имя класса обертки контрола. | `string` | |
| debounceDelay | Устаревшее свойство; используйте внешний дебаунсинг. Определяет задержку (в миллисекундах) перед вызовом функции обработки. | `number` | `0` |
| [defaultValue](#slider-variants) | Значение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. | `number` `[number, number]` | `0` |
| [disabled](#disabled) | Указывает на то, что пользователь не может взаимодействовать с контролом. | `boolean` | `false` |
| [errorMessage](#error) | Отображаемый текст ошибки. | `string` | |
| [hasTooltip](#tooltip) | Устаревшее свойство; вместо него используйте `tooltipDisplay`. Включает или отключает отображение тултипа с текущим значением компонента. | `boolean` | `false` |
| [marks](#marks) | Текстовые метки под слайдером. В данном свойстве можно задать количество меток или массив значений, для которых они должны отображаться. При указании `0` или `[]` метки не отображаются. | `number` `number[]` | `2` |
| [marksCount](#marks) | Устаревшее свойство; вместо него используйте `marks`. Количество меток под слайдером. Делит весь диапазон на равные части. Минимальное значение — `2`. Игнорируется, если задано `availablevalues` (устаревшее свойство). | `number` | `2` |
| [marksFormat](#marks) | Определяет форматирование отображаемого значения метки. | `(value: number) => string` | |
| [max](#min-and-max-value) | Максимальное значение компонента. | `number` | `100` |
| [min](#min-and-max-value) | Минимальное значение компонента. | `number` | `0` |
| onBlur | Срабатывает, когда контрол теряет фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| onUpdate | Срабатывает, когда пользователь изменяет значение слайдера. Передает событие изменения в качестве аргумента обратного вызова. | `((value: number \| [number, number]) => void)` | |
| onUpdateComplete | Активируется при срабатывании события `ontouchend` (завершение касания) или `onmouseup` (отпускание кнопки мыши). Передает событие изменения в качестве аргумента обратного вызова. | `((value: number \| [number, number]) => void)` | |
| onFocus | Срабатывает, когда контрол получает фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| [size](#size) | Размер контрола. | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| [step](#step) | Величина, на которую изменяется значение слайдера при каждом перемещении ползунка. Если установить значение `null`, в качестве шагов будет использоваться свойство `marks`. Игнорируется, если задано `availablevalues` (устаревшее свойство). | `number` `null` | `1` |
| tabIndex | Атрибут `tabIndex` для контрола. | `number` `[number, number]` | |
| [tooltipDisplay](#tooltip) | Управляет поведением отображения тултипа. | `off` `on` `auto` | `off` |
| [tooltipFormat](#tooltip) | Определяет форматирование отображаемого значения тултипа. Если значение не задано, используется `marksFormat`. | `(value: number) => string` | |
| [validationState](#error) | Состояние валидации. | `"invalid"` | |
| [value](#slider-variants) | Значение контрола. | `number` `[number, number]` | |
123 changes: 85 additions & 38 deletions src/components/Slider/README.md
Original file line number Diff line number Diff line change
@@ -190,96 +190,143 @@ LANDING_BLOCK-->

### Marks

The `marksCount` property is used to specify the number of visual marks along the slider that indicate various points between the minimum and maximum value. This property enhances the usability and visual interface of the slider, especially for denoting specific intervals. By default, `marksCount` is 2 (minimum and maximum values); you can set a higher value, if required.
The `marks` property is utilized in `Slider` component to specify visual markers along the slider that help to indicate various points between the minimum and maximum value. This property enhances the usability and visual interface of the slider, especially for denoting specific intervals. By default it is 2 (`min` and `max` values). You can use it in 2 different ways:

> The mark value is available for selection, even when it does not match the `step` value condition.
- the amount of visual markers along the slider
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marks={11} />
`}
>
<UIKitExamples.SliderExample marks={11} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider marks={11} />
```

<!--/GITHUB_BLOCK-->

- the array of marker values along the slider

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marksCount={11} />
<Slider marks={[0, 50, 100]} />
`}
>
<UIKitExamples.SliderExample marksCount={11} />
<UIKitExamples.SliderExample marks={[0, 50, 100]} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider marksCount={11} />
<Slider marks={[0, 50, 100]} />
```

<!--/GITHUB_BLOCK-->

### Available values
`0` or empty array `[]` value in `marks` property hide all marks from `Slider`.

The `availableValues` property is used to define specific values the slider can handle, as opposed to a continuous range. This is particularly useful when only certain discrete values are valid for selection. `availableValues` enables specifying an array of numbers which are the exact values that the users are allowed to select when working with the `Slider`.
<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider marks={0} />
`}
>
<UIKitExamples.SliderExample marks={0} />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider marks={0} />
```

<!--/GITHUB_BLOCK-->

> The `availableValues` property overrides `min`, `max`, `marksCount` and `step` (when those are used all at the same time); in this case, the slider will directly use the provided array values rather than a continuous range.
> The mark value is available for selection, even if it does not match the `step` value condition
You are able to change display format of marks values by using `marksFormat` property.

#### Define available values

You can set `step` property to `null` to define a set of specific values that the slider can handle, as opposed to a continuous range. This is particularly useful when only certain discrete values are valid for selection. In that case properties `min`, `max` and `marks` allows specifying an array of numbers representing the exact values that users are allowed to select using the `Slider`.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>
`}
>
<UIKitExamples.SliderExample availableValues={[10, 20, 50, 55, 65, 80]} />
<UIKitExamples.SliderExample marks={[10, 20, 50, 55, 65, 80]} step={null}/>
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null} />
```

<!--/GITHUB_BLOCK-->

## Tooltip

The `hasTooltip` property is a boolean attribute. It toggles displaying the tooltip that shows the current value as the user is moving with the slider.
The `tooltipDisplay` property is used in `Slider` component to control the display behaviour of a tooltip that shows the current value as the user interacts with the slider. `auto` value shows tooltip only when `Slider`'s handle are hovered by cursor or focused.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Slider hasTooltip={true} />
<Slider tooltipDisplay="on" />
`}
>
<UIKitExamples.SliderExample hasTooltip={true} />
<UIKitExamples.SliderExample tooltipDisplay="on" />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<Slider hasTooltip={true} />
<Slider tooltipDisplay="on" />
```

<!--/GITHUB_BLOCK-->

You are able to change display format of tooltip value by using `tooltipFormat` property. If you don't specify `tooltipformat` then will be used `marksFormat` to display the value in tooltip.

## Properties

| Name | Description | Type | Default |
| :----------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-----: |
| apiRef | Ref to the `Slider` focus and blur properties | `RefObject<SliderRef>` | |
| autoFocus | The control's `autofocus` attribute | `boolean` | |
| [availableValues](#available-values) | Specifies the array of available values for the slider | `number[]` | |
| className | The control's wrapper class name | `string` | |
| debounceDelay | Specifies the delay (in milliseconds) before the processing function is called | `number` | `0` |
| [defaultValue](#slider-variants) | The control's default value, used when the component is uncontrolled | `number` `[number, number]` | `0` |
| [disabled](#disabled) | Shows that the user cannot work with the control | `boolean` | `false` |
| [errorMessage](#error) | Error message to display | `string` | |
| [hasTooltip](#tooltip) | Toggles displaying a tooltip with the current value | `boolean` | `false` |
| [marksCount](#marks) | Number of text marks under the slider that split the range into equal parts. The available values are 2 or higher. This property will be ignored if `availablevalues` is set. | `number` | `2` |
| [max](#min-and-max-value) | The maximum value of the component | `number` | `100` |
| [min](#min-and-max-value) | The minimum value of the component | `number` | `0` |
| onBlur | Fires when the control loses focus. Provides a focus event as a callback argument | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| onUpdate | Fires when the user changes the slider value. Provides a change event as a callback argument | `((value: number \| [number, number]) => void)` | |
| onUpdateComplete | Fires when `ontouchend` or `onmouseup` is triggered. Provides a change event as a callback argument | `((value: number \| [number, number]) => void)` | |
| onFocus | Fires when the control gets focus. Provides a focus event as a callback argument | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| [size](#size) | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| [step](#step) | Increment to add or subtract on each slider's move. This property will be ignored if `availablevalues` is set. | `number` | `1` |
| tabIndex | The control's `tabIndex` attribute | `number` `[number, number]` | |
| [validationState](#error) | Validation state | `"invalid"` | |
| [value](#slider-variants) | The value of the control | `number` `[number, number]` | |
| Name | Description | Type | Default |
| :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-----: |
| apiRef | Ref to Slider's component props of focus and blur | `RefObject<SliderRef>` | |
| autoFocus | The control's `autofocus` attribute | `boolean` | |
| [availableValues](#define-available-values) | (deprecated) use `marks` and `step` === null instead. Specifies the array of available values for the slider | `number[]` | |
| className | The control's wrapper class name | `string` | |
| debounceDelay | (deprecated) use external debouncing. Specifies the delay (in milliseconds) before the processing function is called | `number` | `0` |
| [defaultValue](#slider-variants) | The control's default value, used when the component is not controlled | `number` `[number, number]` | `0` |
| [disabled](#disabled) | Indicates that the user cannot interact with the control | `boolean` | `false` |
| [errorMessage](#error) | Text of an error to show | `string` | |
| [hasTooltip](#tooltip) | (deprecated) use `tooltipDisplay` instead. Show tooltip with current value of component or not | `boolean` | `false` |
| [marks](#marks) | Text marks under the slider. Could be set to the amount of the slider's marks, or could be set to the array of values which should have marks. `0` or empty array value hides all marks. | `number` `number[]` | `2` |
| [marksCount](#marks) | (deprecated) use `marks` instead. Amount of text marks under the slider. Split whole range on equal parts. Could be set >=2. This prop will be ignored if `availablevalues`(deprecated) is set. | `number` | `2` |
| [marksFormat](#marks) | Formatter for the mark's displayed value | `(value: number) => string` | |
| [max](#min-and-max-value) | The maximum value of the component. | `number` | `100` |
| [min](#min-and-max-value) | The minimum value of the component. | `number` | `0` |
| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| onUpdate | Fires when the slider’s value is changed by the user. Provides change event as an callback's argument | `((value: number \| [number, number]) => void)` | |
| onUpdateComplete | Fires when ontouchend or onmouseup is triggered. Provides change event as an callback's argument | `((value: number \| [number, number]) => void)` | |
| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | `((e: FocusEvent<HTMLDivElement, Element>) => void)` | |
| [size](#size) | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| [step](#step) | Value to be added or subtracted on each step the slider makes. Can be set to `null` to make `marks` as steps. This prop will be ignored if `availablevalues`(deprecated) is set. | `number` `null` | `1` |
| tabIndex | The control's `tabIndex` attribute | `number` `[number, number]` | |
| [tooltipDisplay](#tooltip) | The tooltip's display behaviour | `off` `on` `auto` | `off` |
| [tooltipFormat](#tooltip) | Formatter for the tooltip's displayed value. Uses `marksFormat` if not set | `(value: number) => string` | |
| [validationState](#error) | Validation state | `"invalid"` | |
| [value](#slider-variants) | The value of the control | `number` `[number, number]` | |

0 comments on commit 8871b03

Please sign in to comment.