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

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

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