Slider

@cloud-ru/ds-slider — Ползунок для выбора числового значения или диапазона — с метками, tooltip на ручке и опциональным равномерным распределением нелинейных значений.

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

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

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

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

Установка

pnpm add @cloud-ru/ds-slider

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

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

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

Одно значение, без меток

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

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

Диапазон

range + handleTip — видно оба значения

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

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

С метками

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

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

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

Props

SliderProps