website/plasma-web-docs/docs/components/Range.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Range.mdx
390 строк13 KB
TitanKuzmich
docs: update Range docs
23 дек 2025, 18:15
23 дек 2025, 18:155406236
---
id: range
title: Range
---

import { PropsTable, Description } from '@site/src/components';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Range
<Description name="Range" />

### Быстрый старт

<Tabs>
    <TabItem value="uncontrolled" label="Uncontrolled" default>
        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            return (
                <div>
                    <Range
                        label="Диапазон значений"
                        leftHelper="Введите два значения"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value="controlled" label="Controlled">
        ```tsx live
        import React, { useState } from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            const [firstValue, setFirstValue] = useState('');
            const [secondValue, setSecondValue] = useState('');

            return (
                <div>
                    <Range
                        firstValue={firstValue}
                        secondValue={secondValue}
                        label="Диапазон значений"
                        leftHelper="Введите два значения"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                        onChangeFirstValue={(e) => {
                            setFirstValue(e.target.value);
                        }}
                        onChangeSecondValue={(e) => {
                            setSecondValue(e.target.value);
                        }}
                    />
                </div>
            );
        }
        ```
    </TabItem>
</Tabs>

### Управление внешним видом

Внешний вид компонента зависит от свойств `appearance`, `size`:

<Tabs>
    <TabItem value="appearance" label="Appearance" default>
        Для `appearance="clear"` есть возможность отобразить разделитель с помощью `hasClearDivider`

        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            return (
                <div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap' }}>
                    <Range
                        appearance="default"
                        label="Appearance default"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                    <Range
                        appearance="clear"
                        label="Appearance clear"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                    <Range
                        appearance="clear"
                        hasClearDivider
                        label="Appearance clear с разделителем"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value="size" label="Size">
        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            return (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                    <Range
                        size="l"
                        label="Size l"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                    <Range
                        size="m"
                        label="Size m"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                    <Range
                        size="s"
                        label="Size s"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                    <Range
                        size="xs"
                        label="Size xs"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                </div>
            );
        }
        ```
    </TabItem>
</Tabs>

### Варианты разделителя

<Tabs>
    <TabItem value="dash" label="Dash" default>
        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            return (
                <div>
                    <Range
                        label="Диапазон"
                        leftHelper="Разделитель тире"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        dividerVariant="dash"
                    />
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value="icon" label="Icon">
        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';
        import { IconSber } from '@salutejs/plasma-icons';

        export function App() {
            return (
                <div>
                    <Range
                        label="Диапазон"
                        leftHelper="Иконка в качестве разделителя"
                        firstPlaceholder="От"
                        secondPlaceholder="До"
                        firstTextfieldTextBefore="С"
                        secondTextfieldTextBefore="ДО"
                        dividerVariant="icon"
                        dividerIcon={<IconSber size="s" />}
                    />
                </div>
            );
        }
        ```
    </TabItem>
    <TabItem value="none" label="None">
        При таком варианте свойства `firstTextfieldTextBefore` и `secondTextfieldTextBefore` становятся обязательными

        ```tsx live
        import React from 'react';
        import { Range } from '@salutejs/plasma-web';

        export function App() {
            return (
                <div>
                    <Range
                        label="Диапазон времени"
                        leftHelper="Без видимого разделителя"
                        firstValue="10:00"
                        secondValue="15:45"
                        firstTextfieldTextBefore="С"
                        secondTextfieldTextBefore="ДО"
                        dividerVariant="none"
                    />
                </div>
            );
        }
        ```
    </TabItem>
</Tabs>

### Валидация и состояния полей

Индикация ошибки или успешного ввода осуществляется через свойства `firstValueError`, `secondValueError`, `firstValueSuccess`, `secondValueSuccess`:

```tsx live
import React, { useState } from 'react';
import { Range } from '@salutejs/plasma-web';

export function App() {
    const [firstValue, setFirstValue] = useState('');
    const [secondValue, setSecondValue] = useState('');
    const [firstValueError, setFirstValueError] = useState(false);
    const [secondValueError, setSecondValueError] = useState(false);
    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
    const [secondValueSuccess, setSecondValueSuccess] = useState(false);

    const validateRange = (first: string, second: string) => {
        const num1 = Number(first);
        const num2 = Number(second);
        
        setFirstValueError(false);
        setSecondValueError(false);
        setFirstValueSuccess(false);
        setSecondValueSuccess(false);
        
        if (first && second) {
            if (num1 >= num2) {
                setFirstValueError(true);
                setSecondValueError(true);
            } else {
                setFirstValueSuccess(true);
                setSecondValueSuccess(true);
            }
        }
    };

    const handleFirstChange = (e) => {
        const value = e.target.value;
        setFirstValue(value);
        validateRange(value, secondValue);
    };

    const handleSecondChange = (e) => {
        const value = e.target.value;
        setSecondValue(value);
        validateRange(firstValue, value);
    };

    return (
        <div>
            <Range
                firstValue={firstValue}
                secondValue={secondValue}
                label="Введите диапазон чисел"
                leftHelper="Первое число должно быть меньше второго"
                firstPlaceholder="Меньшее число"
                secondPlaceholder="Большее число"
                dividerVariant="dash"
                firstValueError={firstValueError}
                secondValueError={secondValueError}
                firstValueSuccess={firstValueSuccess}
                secondValueSuccess={secondValueSuccess}
                onChangeFirstValue={handleFirstChange}
                onChangeSecondValue={handleSecondChange}
            />
        </div>
    );
}
```

### Подсказки и дополнительные элементы
Для вывода подсказки снизу от поля используйте свойство leftHelper,
для подсказки в виде Tooltip - hintText, для подсказки сверху справа - titleCaption:

```tsx live
import React from 'react';
import { Range } from '@salutejs/plasma-web';

export function App() {
    return (
        <div>
            <Range
                label="Диапазон значений"
                leftHelper="Подсказка снизу слева"
                titleCaption="Дополнительная информация"
                hintText="Подсказка в виде тултипа"
                hintView="default"
                hintSize="m"
                firstPlaceholder="От"
                secondPlaceholder="До"
                dividerVariant="dash"
            />
        </div>
    );
}
```

Также доступны слоты для дополнительного контента:
```tsx live
import React from 'react';
import { Range, IconButton } from '@salutejs/plasma-web';
import { IconSearch, IconPlasma } from '@salutejs/plasma-icons';

export function App() {
    const ActionButton = () => (
        <IconButton view="clear" size="l">
            <IconSearch size="s" />
        </IconButton>
    );

    return (
        <div>
            <Range
                label="Диапазон с дополнительными элементами"
                leftHelper="Используйте кнопку для поиска"
                firstPlaceholder="От"
                secondPlaceholder="До"
                dividerVariant="dash"
                contentLeft={<IconPlasma size="s" color="inherit" />}
                contentRight={<ActionButton />}
                firstTextfieldContentLeft={<IconPlasma size="s" color="inherit" />}
                secondTextfieldContentRight={<IconPlasma size="s" color="inherit" />}
                firstTextfieldTextAfter="руб."
                secondTextfieldTextAfter="руб."
                stretch
            />
        </div>
    );
}
```

### Обязательность поля
:::tip
Наличие индикатора регулируется свойством hasRequiredIndicator.
:::

Обязательность поля задаётся с помощью свойства required.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства requiredIndicatorPlacement, которое принимает значения left и right.

```tsx live
import React from 'react';
import { Range } from '@salutejs/plasma-web';

export function App() {
    return (
        <div>
            <Range
                hasRequiredIndicator
                required
                requiredIndicatorPlacement="right"
                label="Обязательный диапазон"
                leftHelper="Оба поля должны быть заполнены"
                firstPlaceholder="От"
                secondPlaceholder="До"
                dividerVariant="dash"
            />
        </div>
    );
}
```

### Таблица свойств
<PropsTable name="Range" exclude={['css']} />