# Slider The 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. ```tsx import {Slider} from '@gravity-ui/uikit'; ``` ## Slider variations ### Single slider This is a slider with one handle to select a single value. It is used by default. ```tsx ``` ### Range slider This is slider with two handles to select a range. To use it, set `defaultValue` (for an uncontrolled slider) or `value` (for a controlled one) for the array. ```tsx ``` ## States ### Disabled This is a state of a `Slider` where you do not want to allow the user to work with this component. ```tsx ``` ### Error This `Slider` state is for incorrect user input. To change the `Slider` appearance, use the `validationState` property with the `"invalid"` value. Optionally, you can provide an error message through the `errorMessage` property. This message text will be rendered under the slider. ```tsx ``` ## Size Use the `size` property to manage the `Slider` size. The default size is `m`. ```tsx ``` ## Value ### Minimum and maximum value The `min` and `max` properties define the limits of the range the `Slider` can handle. These properties are essential for setting the boundaries of the selectable values. ```tsx ``` ### Step The `step` property determines the increments within the minimum and maximum value range. This means how much the value changes with a single slider move. ```tsx ``` ### Marks 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 amount of visual markers along the slider ```tsx ``` - the array of marker values along the slider ```tsx ``` `0` or empty array `[]` value in `marks` property hide all marks from `Slider`. ```tsx ``` > 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`. ```tsx ``` ## Start point The `startPoint` property allows you to set the start point of the track. It uses the minimal `Slider` value by default. It will be ignored if you use `Slider` with range values or if you set `inverted` property. ```tsx ``` ## Inverted The `inverted` property allows you to set the inverted view of the `Slider`'s track. By default (of `false`) `Slider` shows interval from `min` to handle. If `true` then it indicates interval from pin to `max`. Only for single `Slider`. Property `startPoint` will be ignored. ```tsx ``` ## Tooltip 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. ```tsx ``` 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 Slider's component props of focus and blur | `RefObject` | | | autoFocus | The control's `autofocus` attribute | `boolean` | | | className | The control's wrapper class name | `string` | | | [defaultValue](#slider-variants) | The control's default value, used when the component is not controlled. It uses the minimal `Slider` value by default. | `number` `[number, number]` | | | [disabled](#disabled) | Indicates that the user cannot interact with the control | `boolean` | `false` | | [errorMessage](#error) | Text of an error to show | `string` | | | [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` | | [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) => 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) => 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. | `number` `null` | `1` | | [startPoint](#start-point) | Start point of the track. Ignored for range slider and for inverted slider. | `number` | | | [inverted](#inverted) | Slider with inverted track (from handle to `max`). | `boolean` | | | 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]` | |