FieldSlider

Поле для непрерывной/дискретной шкалы. Связывает текстовый input (наверху) и slider (@cloud-ru/ds-slider) — изменение в любом синхронизирует второй. По умолчанию ввод в input снэпит к ближайшей точке шкалы; режим unbindInputFromMarks отключает это.

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

• Громкость, яркость, прозрачность — диапазоны без жёстких меток.
• Качество сжатия, уровень детализации — снэп к набору меток (marks + step={null}).
• Read-only прогресс/использование (readonly) — отображает значение без интеракции.

Анатомия

Size (default m)

ValidationState (default default)

Тонирует фон поля (acrylic) по Figma-модели и управляет иконкой подсказки. Проп error форсит error поверх любого значения. Иконка слева от подсказки появляется при showHintIcon.

• default — нейтральный фон, нет валидации: без цвета и иконки (textTertiary).
• error — красная тонировка фона, поле не прошло валидацию.
• warning — жёлтая тонировка фона, предупреждение (ввод допустим).
• success — зелёная тонировка фона, подтверждение успешного ввода.

Поведение

Controlled vs uncontrolled

• Controlled — передаются value и onChange; значением владеет родитель. Ползунок и input синхронизируются через ваш state.
• Uncontrolled — передаётся defaultValue (начальное значение, по умолчанию min, либо [min, max] при range). Компонент держит значение сам; onChange остаётся доступным для наблюдения за изменениями.

Текстовый input принимает только числовой ввод: нечисловой keystroke отклоняется и не попадает в поле. Значение фиксируется (снэп к шкале/меткам и onChange) при потере фокуса (blur) или нажатии Enter.

Установка

pnpm add @cloud-ru/ds-fields

import { FieldSlider } from '@cloud-ru/ds-fields'

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

С метками

import { FieldSlider } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function SliderWithMarks() {
  const [value, setValue] = useState(25);
  return (
    <FieldSlider
      label='Качество сжатия'
      hint='Снэпит к ближайшей метке'
      min={0}
      max={100}
      step={null}
      marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }}
      value={value}
      onChange={v => setValue(v as number)}
    />
  );
}

Кастомный formatter

import { FieldSlider } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function SliderWithFormatter() {
  const [value, setValue] = useState(75);
  return (
    <FieldSlider
      label='Громкость'
      min={0}
      max={100}
      step={5}
      postfix='%'
      textInputFormatter={v => `${v} %`}
      value={value}
      onChange={v => setValue(v as number)}
    />
  );
}

Range (диапазон)

import { FieldSlider } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function SliderRange() {
  const [value, setValue] = useState<number[]>([20, 80]);
  return (
    <FieldSlider
      label='Диапазон цены'
      hint='₽/мес. Текстовое поле в range-режиме только для чтения'
      range
      min={0}
      max={100}
      step={1}
      postfix='₽'
      value={value}
      onChange={v => setValue(v as number[])}
    />
  );
}

Props

Types

FieldSliderProps

FieldLayoutPresets

SliderMarks

SliderValue

TextInputFormatter

Related props

FieldLength

QuestionTooltipProps

Size

ValidationState

Storybook

Figma