docs: add readme description for slider

gravity-ui · May 6, 2024 · 0ead8f0 · 0ead8f0
1 parent 39b7fe8
commit 0ead8f0
Showing 1 changed file with 246 additions and 0 deletions.
diff --git 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider />
+`}
+>
+    <UIKit.Slider/>
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider />
+```
+
+<!--/GITHUB_BLOCK-->
+
+### 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider defaultValue={[20, 40]} />
+`}
+>
+    <UIKit.Slider defaultValue={[20, 40]} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider defaultValue={[20, 40]} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+## States
+
+### Disabled
+
+The state of the `Slider` where you don't want the user to be able to interact with the component.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider disabled={true} />
+`}
+>
+    <UIKit.Slider disabled={true} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider disabled={true} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+### 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider validationState={"invalid"} />
+<Slider validationState={"invalid"} errorMessage="Error message" />
+`}
+>
+    <UIKit.Slider validationState={"invalid"} />
+    <UIKit.Slider validationState={"invalid"} errorMessage="Error message" />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider validationState={"invalid"} />
+<Slider validationState={"invalid"} errorMessage="Error message" />
+```
+
+<!--/GITHUB_BLOCK-->
+
+## Size
+
+To control the size of the `Slider` use the `size` property. Default size is `m`.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider size="s" />
+<Slider size="m" />
+<Slider size="l" />
+<Slider size="xl" />
+`}
+>
+    <UIKit.Slider size="s" />
+    <UIKit.Slider size="m" />
+    <UIKit.Slider size="l" />
+    <UIKit.Slider size="xl" />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider size="s" />
+<Slider size="m" />
+<Slider size="l" />
+<Slider size="xl" />
+```
+
+<!--/GITHUB_BLOCK-->
+
+## 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider min={10} />
+<Slider max={50} />
+<Slider min={20} max={60} />
+`}
+>
+    <UIKit.Slider min={10} />
+    <UIKit.Slider max={50} />
+    <UIKit.Slider min={20} max={60} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider min={10} />
+<Slider max={50} />
+<Slider min={20} max={60} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+### 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider step={10} />
+`}
+>
+    <UIKit.Slider step={10} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider step={10} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+### 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider marksCount={11} />
+`}
+>
+    <UIKit.Slider marksCount={11} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider marksCount={11} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+### 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
+`}
+>
+    <UIKit.Slider availableValues={[10, 20, 50, 55, 65, 80]} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider availableValues={[10, 20, 50, 55, 65, 80]} />
+```
+
+<!--/GITHUB_BLOCK-->
+
+## 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.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={`
+<Slider hasTooltip={true} />
+`}
+>
+    <UIKit.Slider hasTooltip={true} />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Slider hasTooltip={true} />
+```
+
+<!--/GITHUB_BLOCK-->
+
 ## Properties
 
 | Name             | Description                                                                                                                                       |                         Type                         | Default |