Gravity UI – UIKit

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

Slider (слайдер) — это настраиваемый и отзывчивый React-компонент, который позволяет пользователям выбирать одно значение или диапазон значений из заданного набора данных.

Варианты слайдера

Одиночный слайдер

Представляет собой слайдер с одним ползунком для выбора одного значения. Используется по умолчанию.

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>
    );
}

Слайдер диапазона

Представляет собой слайдер с двумя ползунками для выбора диапазона. Для его использования необходимо задать defaultValue (для неконтролируемого компонента) или value (для контролируемого компонента) в виде массива.

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>
    );
}

Состояния

`Disabled` (отключен)

Состояние Slider, при котором пользователь не может взаимодействовать с компонентом.

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` (ошибка)

Состояние Slider, которое указывает на некорректный ввод данных пользователем. Для изменения внешнего представления Slider примените свойство validationState, задав ему значение "invalid". Дополнительно через свойство errorMessage можно добавить текст сообщения, который будет отображаться под компонентом.

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>
        </>
    );
}

Размер

Для изменения размера Slider используйте свойство size. Размер по умолчанию — 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>
        </>
    );
}

Значение

Минимальное и максимальное значения

Свойства min и max определяют пределы диапазона, который может обрабатывать Slider. Эти свойства необходимы для установки границ выбираемых значений.

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` (шаг)

Свойство step компонента Slider задает величину шага между минимальным и максимальным значениями. Оно контролирует изменение значения при перемещении ползунка.

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 задает количество визуальных меток компонента Slider, указывающих на разные значения в диапазоне от минимума до максимума. Данное свойство делает слайдер более удобным для пользователя и улучшает его визуальное оформление, особенно в тех случаях, когда необходимо обозначить конкретные интервалы. Значение по умолчанию — 2 (min и max). Его можно использовать двумя способами:

Для задания количества визуальных меток на слайдере:

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>
    );
}

Для указания массива значений меток на слайдере:

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>
    );
}

Если в свойстве marks указать 0 или пустой массив ([]), то все метки компонента 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>
    );
}

Значение метки можно выбрать, даже если оно не соответствует шагу (step).

Формат отображения значений меток можно изменить с помощью свойства marksFormat.

Определение доступных значений

Установка свойства step в null позволяет задать конкретные значения, которые будут доступны на слайдере, вместо непрерывного диапазона. Это особенно полезно в случаях, когда выбор возможен только из заранее определенных дискретных значений. При такой настройке свойства min, max и marks позволяют задать массив чисел, представляющих собой те значения, которые пользователи могут выбрать при работе с компонентом 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>
    );
}

Стартовая точка трека

Свойство startPoint позволяет задать стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона либо при использовании инвертированного слайдера, это свойство игнорируется.

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 позволяет инвертировать положение трека на слайдере. По умолчанию (так же, как и при false) слайдер отображает трек от min до указателя слайдера. При значении свойства true трек будет отображаться от значения слайдера до max. Данное свойство игнорируется для слайдера диапазона. При установке значения данного свойства в true значение свойства startPoint будет проигнорировано.

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>
    );
}

Тултип

Свойство tooltipDisplay в компоненте Slider управляет поведением отображения тултипа с текущим значением при взаимодействии пользователя со слайдером. Значение auto позволяет отображать тултип только при наведении курсора на ползунок компонента Slider или получении компонентом фокуса.

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>
    );
}

Формат отображения значения тултипа можно изменить с помощью свойства tooltipFormat. Если не указать tooltipformat, то для отображения значения в тултипе будет использовано свойство marksFormat.

Свойства

Имя	Описание	Тип	Значение по умолчанию
apiRef	Ссылка на свойства `focus` and `blur` компонента `Slider`.	`RefObject<SliderRef>`
autoFocus	Атрибут `autofocus` для контрола.	`boolean`
className	Имя класса обертки контрола.	`string`
defaultValue	Значение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. Если не заполнено, то использует мимнимальное значение слайдера	`number` `[number, number]`
disabled	Указывает на то, что пользователь не может взаимодействовать с контролом.	`boolean`	`false`
errorMessage	Отображаемый текст ошибки.	`string`
marks	Текстовые метки под слайдером. В данном свойстве можно задать количество меток или массив значений, для которых они должны отображаться. При указании `0` или `[]` метки не отображаются.	`number` `number[]`	`2`
marksFormat	Определяет форматирование отображаемого значения метки.	`(value: number) => string`
max	Максимальное значение компонента.	`number`	`100`
min	Минимальное значение компонента.	`number`	`0`
onBlur	Срабатывает, когда контрол теряет фокус. Передает событие фокуса в качестве аргумента обратного вызова.	`((e: FocusEvent<HTMLDivElement, Element>) => void)`
onUpdate	Срабатывает, когда пользователь изменяет значение слайдера. Передает событие изменения в качестве аргумента обратного вызова.	`((value: number \| [number, number]) => void)`
onUpdateComplete	Активируется при срабатывании события `ontouchend` (завершение касания) или `onmouseup` (отпускание кнопки мыши). Передает событие изменения в качестве аргумента обратного вызова.	`((value: number \| [number, number]) => void)`
onFocus	Срабатывает, когда контрол получает фокус. Передает событие фокуса в качестве аргумента обратного вызова.	`((e: FocusEvent<HTMLDivElement, Element>) => void)`
size	Размер контрола.	`"s"` `"m"` `"l"` `"xl"`	`"m"`
step	Величина, на которую изменяется значение слайдера при каждом перемещении ползунка. Если установить значение `null`, в качестве шагов будет использоваться свойство `marks`.	`number` `null`	`1`
startPoint	Задает стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона либо при использовании инвертированного слайдера, это свойство игнорируется.	`number`
inverted	Инвертированное отображение трека (от текущего значения до `max`).	`boolean`

Slider

§Варианты слайдера

§Одиночный слайдер

§Слайдер диапазона

§Состояния

§Disabled (отключен)

§Error (ошибка)

§Размер

§Значение

§Минимальное и максимальное значения

§Step (шаг)

§Метки

§Определение доступных значений

§Стартовая точка трека

§Инвертированный трек

§Тултип

§Свойства

Варианты слайдера

Одиночный слайдер

Слайдер диапазона

Состояния

`Disabled` (отключен)

`Error` (ошибка)

Размер

Значение

Минимальное и максимальное значения

`Step` (шаг)

Метки

Определение доступных значений

Стартовая точка трека

Инвертированный трек

Тултип

Свойства