From f2a3d9916ce4f49d3b8c2b4f041bb5fec9575bff Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Mon, 6 May 2024 21:32:39 +0300 Subject: [PATCH] docs: add readme description for slider --- src/components/Slider/README.md | 246 ++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) diff --git a/src/components/Slider/README.md b/src/components/Slider/README.md index d8cdd43a75..251fd4d31b 100644 --- a/src/components/Slider/README.md +++ b/src/components/Slider/README.md @@ -10,6 +10,252 @@ import {Slider} from '@gravity-ui/uikit'; Slider is a customizable and responsive React component that allows users to select a single value or a range of values from a specified data set. +## Slider variants + +### Single slider + +Slider with one handle to select single value. This Slider is used by default. + + + + + +```tsx + +``` + + + +### Range Slider + +Slider with two handles to select range. To use this slider you should set `defaultValue` (for uncontrolled) or `value` (for controlled) to array. + + + + + +```tsx + +``` + + + +## States + +### Disabled + +The state of the `Slider` where you don't want the user to be able to interact with the component. + + + + + +```tsx + +``` + + + +### Error + +The state of the `Slider` in which you want to indicate incorrect user input. To change `Slider` appearance, use the `validationState` property with the `"invalid"` value. An optional message text can be added via the `errorMessage` property. Error message text will be rendered under the component. + + + + + +```tsx + + +``` + + + +## Size + +To control the size of the `Slider` use the `size` property. Default size is `m`. + + + + + +```tsx + + + + +``` + + + +## Value + +### Min and max value + +The `min` and `max` properties define the limits of the range that the `Slider` component can handle. These properties are essential for setting the boundaries of the selectable values. + + + + + +```tsx + + + +``` + + + +### Step + +The `step` property for `Slider` component determines the incremental steps between the min and max value range. It controls how much the value should increase or decrease as the slider is moved. + + + + + +```tsx + +``` + + + +### Marks + +`marksCount` property is utilized in `Slider` component to specify the number of 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) but you can set the higher value. + + + + + +```tsx + +``` + + + +### Available values + +The `availableValues` property is used in `Slider` component to define a set of specific values that the slider can handle, as opposed to a continuous range. This property is particularly useful when only certain discrete values are valid for selection. This property allows specifying an array of numbers representing the exact values that users are allowed to select using the `Slider`. + +> The `availableValues` property overrides `min`, `max`, `marksCount` and `step` properties if used in conjunction, as the slider directly uses the provided array values instead of a continuous range. + + + + + +```tsx + +``` + + + +## Tooltip + +The `hasTooltip` property is a boolean attribute used in `Slider` component to control the display of a tooltip that shows the current value as the user interacts with the slider. + + + + + +```tsx + +``` + + + ## Properties | Name | Description | Type | Default |