Slider

import {Slider} from '@gravity-ui/uikit';

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.

§Slider variations

§Single slider

This is a slider with one handle to select a single value. It is used by default.

<Slider />

§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.

<Slider defaultValue={[20, 40]} />

§States

§Disabled

This is a state of a Slider where you do not want to allow the user to work with this component.

<Slider disabled={true} />

§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.

<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />

§Size

Use the size property to manage the Slider size. The default size is m.

<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />

§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.

<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />

§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.

<Slider step={10} />

§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

<Slider marks={11} />

• the array of marker values along the slider

<Slider marks={[0, 50, 100]} />

0 or empty array [] value in marks property hide all marks from Slider.

<Slider marks={0} />

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.

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

§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.

<Slider startPoint={50} />

§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.

<Slider inverted />

§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.

<Slider tooltipDisplay="on" />

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