# Range Props (свойства) для компонента Range: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"readOnly","type":{"name":"boolean"}},{"name":"label","type":{"name":"string"}},{"name":"leftHelper","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"contentRight","type":{"name":"ReactNode"}},{"name":"firstValue","type":{"name":"TextfieldPrimitiveValue"}},{"name":"secondValue","type":{"name":"TextfieldPrimitiveValue"}},{"name":"firstValueError","type":{"name":"boolean"}},{"name":"secondValueError","type":{"name":"boolean"}},{"name":"firstValueSuccess","type":{"name":"boolean"}},{"name":"secondValueSuccess","type":{"name":"boolean"}},{"name":"firstPlaceholder","type":{"name":"string"}},{"name":"secondPlaceholder","type":{"name":"string"}},{"name":"firstTextfieldContentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"firstTextfieldContentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"secondTextfieldContentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"secondTextfieldContentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"firstTextfieldTextAfter","type":{"name":"string"}},{"name":"secondTextfieldTextAfter","type":{"name":"string"}},{"name":"autoComplete","type":{"name":"string"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"required","type":{"name":"boolean"}},{"name":"hasRequiredIndicator","type":{"name":"boolean"}},{"name":"onChangeFirstValue","type":{"name":"BaseCallbackChangeInstance"}},{"name":"onChangeSecondValue","type":{"name":"BaseCallbackChangeInstance"}},{"name":"onSearchFirstValue","type":{"name":"BaseCallbackKeyboardInstance"}},{"name":"onSearchSecondValue","type":{"name":"BaseCallbackKeyboardInstance"}},{"name":"onFocusFirstTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onFocusSecondTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onBlurFirstTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onBlurSecondTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"firstTextfieldTextBefore","type":{"name":"string"}},{"name":"secondTextfieldTextBefore","type":{"name":"string"}},{"name":"dividerVariant","type":{"name":"enum","raw":"\"none\" | \"icon\" | \"dash\"","value":[{"value":"\"none\""},{"value":"\"icon\""},{"value":"\"dash\""}]}},{"name":"dividerIcon","type":{"name":"ReactNode"}}] ## Использование Компонент  `Range`  представляет собой два поля ввода какого-либо диапазона. К примеру диапазон цен или дат.
```tsx
import React, {useState} from 'react';
import { Range, IconButton } from '@salutejs/plasma-web';
import { IconSearch } from '@salutejs/plasma-icons';
export function App() {
const [firstValue, setFirstValue] = useState('');
const [secondValue, setSecondValue] = useState('');
const ActionButton = () => {
return (
<IconButton view="clear" size="l">
<IconSearch size="s" />
</IconButton>
);
};
return (
<div>
<Range
firstValue={firstValue}
secondValue={secondValue}
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
contentRight={<ActionButton />}
dividerVariant="dash"
onChangeFirstValue={(e) => {
setFirstValue(e.target.value);
}}
onChangeSecondValue={(e) => {
setSecondValue(e.target.value);
}}
/>
</div>
);
}
```
### Размер Range Размер Range задаётся с помощью свойства  `size` : 
```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
<Range
view="default"
size="l"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
<Range
view="default"
size="m"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
<Range
view="default"
size="s"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
<Range
view="default"
size="xs"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
</div>
);
}
```
### Вид разделителя Вид разделителя задается с помощью свойства  `dividerVariant` : 
```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
</div>
);
}
```
### Вид разделителя Вид разделителя задается с помощью свойства  `dividerVariant` : ```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
</div>
);
}
```
При таком варианте свойства  `firstTextfieldTextBefore`  и  `secondTextfieldTextBefore`  становятся обязательными:
```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
firstValue="10:00"
secondValue="15:45"
leftHelper="Подсказка к полю"
firstTextfieldTextBefore="С"
secondTextfieldTextBefore="ДО"
dividerVariant="none"
/>
</div>
);
}
```
### Вид разделителя Вид разделителя задается с помощью свойства  `dividerVariant` : ```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Заполните поле 1"
secondPlaceholder="Заполните поле 2"
dividerVariant="dash"
/>
</div>
);
}
```
При таком варианте свойства  `firstTextfieldTextBefore`  и  `secondTextfieldTextBefore`  становятся обязательными: ```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
firstValue="10:00"
secondValue="15:45"
leftHelper="Подсказка к полю"
firstTextfieldTextBefore="С"
secondTextfieldTextBefore="ДО"
dividerVariant="none"
/>
</div>
);
}
```
При таком варианте свойства  `dividerIcon`  становится обязательным:
```tsx
import React from 'react';
import { Range } from '@salutejs/plasma-web';
import { IconSber } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<Range
view="default"
size="l"
label="Лейбл"
firstValue="10:00"
secondValue="15:45"
leftHelper="Подсказка к полю"
firstTextfieldTextBefore="С"
secondTextfieldTextBefore="ДО"
dividerVariant="icon"
dividerIcon={<IconSber size="s" />}
/>
</div>
);
}
```
### Валидация и индикация успешного ввода За индикацию ошибки или успешного ввода отвечают  `firstValueError` ,  `secondValueError` ,  `firstValueSuccess` ,  `secondValueSuccess` .
В данном примере валидация происходит при нажатии клавиши  `Enter`  после ввода значений:
```tsx
import React, {useState, ChangeEvent, Dispatch, SetStateAction} from 'react';
import { Range, IconButton } from '@salutejs/plasma-web';
import { IconSearch } from '@salutejs/plasma-icons';
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 checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
const handleChangeValue = (
e: ChangeEvent<HTMLInputElement>,
setter: Dispatch<SetStateAction<string>>,
error: boolean,
errorSetter: Dispatch<SetStateAction<boolean>>,
success: boolean,
successSetter: Dispatch<SetStateAction<boolean>>,
) => {
const { value } = e.target;
if (!checkValue(value)) {
return;
}
if (error) {
errorSetter(false);
}
if (success) {
successSetter(false);
}
setter(value);
};
const firstValueConstraint = (value: number) =>
value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
const secondValueConstraint = (value: number) =>
value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
const handleCommitValue = (
value: string,
constraint: (currentValue: number) => boolean,
errorSetter: Dispatch<SetStateAction<boolean>>,
successSetter: Dispatch<SetStateAction<boolean>>,
) => {
if (!value) {
return;
}
if (!checkValue(value)) {
return errorSetter(true);
}
if (constraint(Number(value))) {
return errorSetter(true);
}
successSetter(true);
};
const ActionButton = () => {
return (
<IconButton view="clear" size="l">
<IconSearch size="s" />
</IconButton>
);
};
return (
<div>
<Range
size="l"
view="default"
firstValue={firstValue}
secondValue={secondValue}
label="Введите кол-во товара"
leftHelper="Кол-во товара не может быть меньше 1 и превышать 10"
firstPlaceholder="1"
secondPlaceholder="5"
contentRight={<ActionButton />}
dividerVariant="dash"
firstValueError={firstValueError}
secondValueError={secondValueError}
firstValueSuccess={firstValueSuccess}
secondValueSuccess={secondValueSuccess}
onChangeFirstValue={(e) => {
handleChangeValue(
e,
setFirstValue,
firstValueError,
setFirstValueError,
firstValueSuccess,
setFirstValueSuccess,
);
}}
onChangeSecondValue={(e) => {
handleChangeValue(
e,
setSecondValue,
secondValueError,
setSecondValueError,
secondValueSuccess,
setSecondValueSuccess,
);
}}
onSearchFirstValue={(e) => {
const { value } = e.target as HTMLInputElement;
handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
}}
onSearchSecondValue={(e) => {
const { value } = e.target as HTMLInputElement;
handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
}}
/>
</div>
);
}
```
### Обязательность поля Обязательность поля задаётся с помощью свойства  `required` .
Если поле является обязательным, то у компонента появляется специальный индикатор. Наличие индикатора регулируется свойством  `hasRequiredIndicator` .
Изменить расположение индикатора можно с помощью свойства  `requiredPlacement` , которое принимает значения  `left`  и  `right` .
```tsx
import React from 'react';
import { Range, IconButton } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const ActionButton = () => {
return (
<IconButton view="clear" size="l">
<IconDone size="s" />
</IconButton>
);
};
return (
<div>
<Range
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите время"
firstValue="10:00"
secondValue="15:45"
contentRight={<ActionButton />}
required
requiredPlacement="right"
/>
</div>
);
}
```