llms.txt

Slider

Ползунок для выбора одного значения или диапазона [min, max]. Поверх rc-slider — те же клавиатурные шорткаты и семантика, но с токенами дизайн-системы и расширениями: handleTip с форматированием и marksEqualSpacing для нелинейных наборов значений.

Когда использовать

  • Выбор числового параметра в известном диапазоне: цена, громкость, приоритет.
  • Фильтры «от…до» (range).
  • Управление параметрами, где ценно видеть относительное положение (например, прозрачность).

Когда не стоит: точный ввод числа (лучше InputNumber), бинарные переключения (Switch), выбор из дискретных вариантов без порядка (RadioGroup).

Установка

pnpm add @cloud-ru/ds-slider
import { Slider } from '@cloud-ru/ds-slider'

Примеры использования

Базовый слайдер

Базовый слайдерОдно значение, без меток
tsx
import { Slider } from '@cloud-ru/ds-slider';

export function Basic() {
  return <Slider min={0} max={100} defaultValue={40} />;
}

Диапазон

Диапазонrange + handleTip — видно оба значения
tsx
import { Slider } from '@cloud-ru/ds-slider';

export function Range() {
  return <Slider range min={0} max={100} defaultValue={[20, 70]} handleTip />;
}

С метками

С метками
tsx
import { Slider } from '@cloud-ru/ds-slider';

export function Marks() {
  return (
    <Slider
      min={0}
      max={100}
      step={25}
      marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }}
      defaultValue={50}
      handleTip
    />
  );
}

Disabled

Disabled
tsx
import { Slider } from '@cloud-ru/ds-slider';

export function Disabled() {
  return <Slider min={0} max={100} defaultValue={40} disabled />;
}

Props

Types

PropsSliderProps
PropTypeDefaultRequiredDescription
activeHandleRender((origin: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>, props: RenderProps) => React.ReactElement) | undefined—no
allowCrossboolean | undefined—no
ariaLabelForHandlestring | string[] | undefined—no
ariaLabelledByForHandlestring | string[] | undefined—no
ariaRequiredboolean | undefined—no
ariaValueTextFormatterForHandleAriaValueFormat | AriaValueFormat[] | undefined—no
autoFocusboolean | undefined—no
classNamestring | undefined—no
countnumber | undefined—no
data-test-idstring—noСтабильный идентификатор для e2e/tests
defaultValuenumber | number[] | undefined—no
disabledboolean | undefined—no
dotsboolean | undefined—no
handleTipboolean—noПоказывать значение в тултипе на ручке
idstring | undefined—no
includedboolean | undefined—no
keyboardboolean | undefined—no
marksRecord<string | number, React.ReactNode | MarkObj> | undefined—no
marksEqualSpacingboolean—noВключение равномерного распределения при нелинейных значениях меток.
maxnumber | undefined—no
minnumber | undefined—no
onAfterChange((value: number | number[]) => void) | undefined—no
onBeforeChange((value: number | number[]) => void) | undefined—no
onBlur((e: React.FocusEvent<HTMLDivElement>) => void) | undefined—no
onChange((value: number | number[]) => void) | undefined—no
onChangeComplete((value: number | number[]) => void) | undefined—no
onFocus((e: React.FocusEvent<HTMLDivElement>) => void) | undefined—no
pushablenumber | boolean | undefined—no
rangeboolean | RangeConfig | undefined—no
reverseboolean | undefined—no
startPointnumber | undefined—no
stepnumber | null | undefined—no
tabIndexnumber | number[] | undefined—no
tipFormatter((value: string | number) => ReactNode)—noФорматирование подсказки; по умолчанию — сырое значение
trackboolean | undefined—no
valuenumber | number[] | undefined—no

Types

SliderProps

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →