Slider

import { Slider } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Базовое использование

<Slider minValue={0} maxValue={100} />

Лейбл

<Slider label="Заголовок" value={40} minValue={0} maxValue={100} />

Текущее значение в виде строки

<Slider label="Заголовок" displayValueType="line" value={70} minValue={0} maxValue={100} />
<Slider label="Заголовок" displayValueType="line" displayValueUnit="₽" value={20} minValue={0} maxValue={100} />

Текущее значение в виде текстового поля

<Slider label="Заголовок" displayValueType="input" value={500} minValue={10} maxValue={1000} />
<Slider label="Заголовок" displayValueType="input" displayValueUnit="₽" value={600} minValue={10} maxValue={1000} />

Шкала

<Slider label="Заголовок" displayValueType="input" scale="base" value={200} minValue={0} maxValue={1000} />
<Slider label="Заголовок" displayValueType="input" scale="interval" value={30} minValue={10} maxValue={100} />
<Slider label="Заголовок" displayValueType="input" customScale={['10 ₽', '20 ₽', '30 ₽']} value={20} minValue={10} maxValue={30} />

С шагом

<Slider label="Заголовок" displayValueType="input" step={100} value={200} minValue={100} maxValue={1000} />

Неактивное состояние

<Slider
  label="Заголовок"
  displayValueType="input"
  displayValueUnit="₽"
  scale="base"
  step={100}
  value="200"
  minValue={0}
  maxValue={1000}
  disabled
/>

Контролируемое состояние

<DemoSliderWithControlledValue>
  {({ value, onChange }) => (
      <Slider
          label="Заголовок"
          displayValueType="input"
          scale="base"
          isControlled
          value={value}
          minValue={0}
          maxValue={1000}
          onChange={onChange}
      />
  )}
</DemoSliderWithControlledValue>

Код DemoSliderWithControlledValueexport const DemoSliderWithControlledValue = ({ children }) => {
    const [currentValue, setCurrentValue] = useState(100);

    const handleChange = (value: number) => {
        setCurrentValue(value);
    };

    return <>{children({ value: currentValue, onChange: handleChange })}</>;
};

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
value	number		Текущее значение
minValue*	number		Минимальное значение
maxValue*	number		Максимальное значение
label	string		Лейбл
displayValueType	"input" \| "line"		Тип выводимого значения
displayValueUnit	string		Единица измерения выводимого значения
isControlled	boolean	false	Переводит компонент в контролируемое состояние
step	number	1	Шаг
scale	"interval" \| "base"		Тип встроенной шкалы
customScale	string[]		Кастомная шкала
disabled	boolean	false	Переводит компонент в выключенное состояние
dataAttrs	{ root?: Record<string, string>; input?: Record<string, string>; rangeInput?: Record<string, string>; scale?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
onChange	(value: number) => void		Обработчик изменения значения

SliderRange

import { SliderRange } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Базовое использование

<SliderRange minValue={100} maxValue={1000} />

Лейбл

<SliderRange label="Заголовок" leftValue={20} rightValue={80} minValue={0} maxValue={100} />

Текущее значение в виде строки

<SliderRange label="Заголовок" displayValueType="line" leftValue={10} rightValue={60} minValue={0} maxValue={100} />
<SliderRange
  label="Заголовок"
  displayValueType="line"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  leftValue={10}
  rightValue={90}
  minValue={0}
  maxValue={100}
/>
<SliderRange
  label="Заголовок"
  displayValueType="line"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  displayValueUnit="₽"
  leftValue={30}
  rightValue={90}
  minValue={0}
  maxValue={100}
/>

Текущее значение в виде текстового поля

<SliderRange
  label="Заголовок"
  displayValueType="input"
  leftValue={200}
  rightValue={800}
  minValue={10}
  maxValue={1000}
/>
<SliderRange
  label="Заголовок"
  displayValueType="input"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  leftValue={200}
  rightValue={800}
  minValue={10}
  maxValue={1000}
/>
<SliderRange
  label="Заголовок"
  displayValueType="input"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  displayValueUnit="₽"
  leftValue={200}
  rightValue={800}
  minValue={10}
  maxValue={1000}
/>

Шкала

<SliderRange
  label="Заголовок"
  displayValueType="input"
  scale="base"
  leftValue={100}
  rightValue={800}
  minValue={0}
  maxValue={1000}
/>
<SliderRange
  label="Заголовок"
  displayValueType="input"
  scale="interval"
  leftValue={20}
  rightValue={90}
  minValue={10}
  maxValue={100}
/>
<SliderRange
  label="Заголовок"
  displayValueType="input"
  customScale={['10 ₽', '20 ₽', '30 ₽']}
  leftValue={20}
  rightValue={30}
  minValue={10}
  maxValue={30}
/>

С шагом

<SliderRange
  label="Заголовок"
  displayValueType="input"
  step={100}
  leftValue={200}
  rightValue={900}
  minValue={100}
  maxValue={1000}
/>

Неактивное состояние

<SliderRange
  label="Заголовок"
  displayValueType="input"
  displayValueUnit="₽"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  scale="base"
  step={100}
  leftValue={100}
  rightValue={1000}
  minValue={0}
  maxValue={1000}
  disabled
/>

Контролируемое состояние

<DemoSliderRangeWithControlledValue>
  {({ leftValue, rightValue, onChange }) => (
      <SliderRange
          label="Заголовок"
          displayValueType="input"
          scale="base"
          isControlled
          leftValue={leftValue}
          rightValue={rightValue}
          minValue={0}
          maxValue={1000}
          onChange={onChange}
      />
  )}
</DemoSliderRangeWithControlledValue>

Код DemoSliderRangeWithControlledValueexport const DemoSliderRangeWithControlledValue = ({ children }) => {
    const [currentLeftValue, setCurrentLeftValue] = useState(100);
    const [currentRightValue, setCurrentRightValue] = useState(900);

    const handleChange = (leftValue: number, rightValue: number) => {
        setCurrentLeftValue(leftValue);
        setCurrentRightValue(rightValue);
    };

    return <>{children({ leftValue: currentLeftValue, rightValue: currentRightValue, onChange: handleChange })}</>;
};

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
leftValue	number		Текущее значение ползунка слева
rightValue	number		Текущее значение ползунка справа
minValue*	number		Минимальное значение
maxValue*	number		Максимальное значение
label	string		Лейбл
displayValueType	"input" \| "line"		Тип выводимого значения
displayLeftValuePrefix	string		Префикс для выводимого значения слева
displayRightValuePrefix	string		Префикс для выводимого значения справа
displayValueUnit	string		Единица измерения выводимого значения
isControlled	boolean	false	Переводит компонент в контролируемое состояние
step	number	1	Шаг
scale	"interval" \| "base"		Тип встроенной шкалы
customScale	string[]		Кастомная шкала
disabled	boolean	false	Переводит компонент в выключенное состояние
dataAttrs	{ root?: Record<string, string>; leftInput?: Record<string, string>; rightInput?: Record<string, string>; leftRangeInput?: Record<string, string>; rightRangeInput?: Record<...>; scale?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам
onChange	(leftValue: number, rightValue: number) => void		Обработчик изменения значения

SliderRatio

import { SliderRatio } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Базовое использование

<SliderRatio
  values={[
      { leftValue: 4000, rightValue: 10 },
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Лейбл

<SliderRatio
  label="Заголовок"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Текущее значение в виде строки

<SliderRatio
  index={1}
  label="Заголовок"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>
<SliderRatio
  index={2}
  label="Заголовок"
  displayLeftValueUnit="минут"
  displayRightValueUnit="ГБ"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Текущее значение в виде текстового поля

<SliderRatio
  index={0}
  label="Заголовок"
  displayValueType="input"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>
<SliderRatio
  index={1}
  label="Заголовок"
  displayValueType="input"
  displayLeftValuePrefix="от"
  displayRightValuePrefix="до"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>
<SliderRatio
  index={2}
  label="Заголовок"
  displayValueType="input"
  displayLeftValueUnit="минут"
  displayRightValueUnit="ГБ"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Шкала

<SliderRatio
  showScale
  values={[
      { leftValue: 4000, rightValue: 10 },
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Неактивное состояние

<SliderRatio
  disabled
  index={1}
  label="Заголовок"
  displayValueType="input"
  displayLeftValueUnit="минут"
  displayRightValueUnit="ГБ"
  values={[
      { leftValue: 3000, rightValue: 20 },
      { leftValue: 2000, rightValue: 30 },
      { leftValue: 1000, rightValue: 40 },
  ]}
/>

Контролируемое состояние

<DemoSliderRatioWithControlledValue>
  {({ index, onChange }) => (
      <SliderRatio
          isControlled
          index={index}
          label="Заголовок"
          displayValueType="input"
          displayLeftValueUnit="минут"
          displayRightValueUnit="ГБ"
          values={[
              { leftValue: 3000, rightValue: 20 },
              { leftValue: 2000, rightValue: 30 },
              { leftValue: 1000, rightValue: 40 },
          ]}
          onChange={onChange}
      />
  )}
</DemoSliderRatioWithControlledValue>

Код DemoSliderRatioWithControlledValueexport const DemoSliderRatioWithControlledValue = ({ children }) => {
    const [currentIndex, setCurrentIndex] = useState(1);

    const handleChange = (index: number) => {
        setCurrentIndex(index);
    };

    return <>{children({ index: currentIndex, onChange: handleChange })}</>;
};

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
values*	ValueType[]		Список значений
index	number		Индекс текущего значения
label	string		Лейбл
displayValueType	"input" \| "line"	line	Тип выводимого значения
displayLeftValuePrefix	string		Префикс для выводимого значения слева
displayRightValuePrefix	string		Префикс для выводимого значения справа
displayLeftValueUnit	string		Единица измерения выводимого значения слева
displayRightValueUnit	string		Единица измерения выводимого значения справа
isControlled	boolean	false	Переводит компонент в контролируемое состояние
disabled	boolean	false	Переводит компонент в выключенное состояние
showScale	boolean	false	Включает отображение шкалы
dataAttrs	{ root?: Record<string, string>; leftInput?: Record<string, string>; rightInput?: Record<string, string>; rangeInput?: Record<string, string>; scale?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам
onChange	(index: number) => void		Обработчик изменения значения