Gravity UI – UIKit

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.

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider />
        </Box>
    );
}

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.

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider defaultValue={[20, 40]} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider defaultValue={[20, 40]} />
        </Box>
    );
}

States

Disabled

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

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider disabled />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider disabled />
        </Box>
    );
}

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.

0100

Error message

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


export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider validationState="invalid" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider validationState="invalid" errorMessage="Error message" />
            </Box>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider validationState="invalid" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider validationState="invalid" errorMessage="Error message" />
            </Box>
        </>
    );
}

Size

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

0100

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


export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider size="s" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="m" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="l" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="xl" />
            </Box>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider size="s" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="m" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="l" />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider size="xl" />
            </Box>
        </>
    );
}

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.

10100

050

2060

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


export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider min={10} />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider max={50} />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider min={20} max={60} />
            </Box>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Box width="100%" maxWidth={300}>
                <Slider min={10} />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider max={50} />
            </Box>
            <Box width="100%" maxWidth={300}>
                <Slider min={20} max={60} />
            </Box>
        </>
    );
}

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.

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider step={10} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider step={10} />
        </Box>
    );
}

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

0102030405060708090100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={11} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={11} />
        </Box>
    );
}

the array of marker values along the slider

050100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={[0, 50, 100]} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={[0, 50, 100]} />
        </Box>
    );
}

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

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={0} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={0} />
        </Box>
    );
}

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.

102050556580

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={[10, 20, 50, 55, 65, 80]} step={null} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider marks={[10, 20, 50, 55, 65, 80]} step={null} />
        </Box>
    );
}

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.

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider startPoint={50} />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider startPoint={50} />
        </Box>
    );
}

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.

0100

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider inverted />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider inverted />
        </Box>
    );
}

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.

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


export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider tooltipDisplay="on" />
        </Box>
    );
}

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

export default function () {
    return (
        <Box width="100%" maxWidth={300}>
            <Slider tooltipDisplay="on" />
        </Box>
    );
}

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<SliderRef>`
autoFocus	The control's `autofocus` attribute	`boolean`
className	The control's wrapper class name	`string`
defaultValue	The control's default value, used when the component is not controlled. It uses the minimal `Slider` value by default.	`number` `[number, number]`
disabled	Indicates that the user cannot interact with the control	`boolean`	`false`
errorMessage	Text of an error to show	`string`
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	Formatter for the mark's displayed value	`(value: number) => string`
max	The maximum value of the component.	`number`	`100`
min	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	The size of the control	`"s"` `"m"` `"l"` `"xl"`	`"m"`
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 of the track. Ignored for range slider and for inverted slider.	`number`
inverted	Slider with inverted track (from handle to `max`).	`boolean`
tabIndex	The control's `tabIndex` attribute	`number` `[number, number]`
tooltipDisplay	The tooltip's display behaviour	`off` `on` `auto`	`off`
tooltipFormat	Formatter for the tooltip's displayed value. Uses `marksFormat` if not set	`(value: number) => string`
validationState	Validation state	`"invalid"`
value	The value of the control	`number` `[number, number]`

Slider

§Slider variations

§Single slider

§Range slider

§States

§Disabled

§Error

§Size

§Value

§Minimum and maximum value

§Step

§Marks

§Define available values

§Start point

§Inverted

§Tooltip

§Properties

Slider variations

Single slider

Range slider

States

Disabled

Error

Size

Value

Minimum and maximum value

Step

Marks

Define available values

Start point

Inverted

Tooltip

Properties