Slider

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

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

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

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

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

Лейбл

Заголовок

<Slider label="Заголовок" value={40} 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="line"
  value={70}
  minValue={0}
  maxValue={100}
/>
<Slider
  label="Заголовок"
  displayValueType="line"
  displayValueUnit="₽"
  value={20}
  minValue={0}
  maxValue={100}
/>

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

Заголовок

500

Заголовок

600

₽

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

Шкала

Заголовок

200

1000

Заголовок

100

Заголовок

10 ₽

20 ₽

30 ₽

<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"
  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}
/>

С шагом

Заголовок

200

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

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

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

Заголовок

200

₽

1000

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

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

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

Заголовок

100

1000

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

<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 minValue={100} maxValue={1000} />

Лейбл

Заголовок

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

<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="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}
/>

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

Заголовок

200

800

Заголовок

от

200

до

800

Заголовок

от

200

₽

до

800

₽

<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"
  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}
/>

Шкала

Заголовок

100

800

1000

Заголовок

100

Заголовок

10 ₽

20 ₽

30 ₽

<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"
  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}
/>

С шагом

Заголовок

200

900

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

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

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

Заголовок

от

100

₽

до

1000

₽

1000

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

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

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

Заголовок

100

900

1000

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

<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 { SliderRange } from '@megafon/ui-core';

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

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

4000

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

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

Лейбл

Заголовок

3000

<SliderRatio
  label="Заголовок"
  values={[
    { 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 },
  ]}
/>

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

Заголовок

от

2000

до

Заголовок

1000

минут

ГБ

<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={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 },
  ]}
/>

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

Заголовок

3000

Заголовок

от

2000

до

Заголовок

1000

минут

ГБ

<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
  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 },
  ]}
/>

Шкала

4000

<SliderRatio
  showScale
  values={[
    { leftValue: 4000, rightValue: 10 },
    { 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 },
  ]}
/>

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

Заголовок

2000

минут

ГБ

<SliderRatio
  disabled
  index={1}
  label="Заголовок"
  displayValueType="input"
  displayLeftValueUnit="минут"
  displayRightValueUnit="ГБ"
  values={[
    { 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 },
  ]}
/>

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

Заголовок

2000

минут

ГБ

<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>

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