# 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`  представляет собой два поля ввода какого-либо диапазона. К примеру диапазон цен или дат. 
### Размер Range Размер Range задаётся с помощью свойства  `size` : 
### Вид разделителя Вид разделителя задается с помощью свойства  `dividerVariant` : 
При таком варианте свойства  `firstTextfieldTextBefore`  и  `secondTextfieldTextBefore`  становятся обязательными: 
При таком варианте свойства  `dividerIcon`  становится обязательным: 
### Валидация и индикация успешного ввода За индикацию ошибки или успешного ввода отвечают  `firstValueError` ,  `secondValueError` ,  `firstValueSuccess` ,  `secondValueSuccess` .
В данном примере валидация происходит при нажатии клавиши  `Enter`  после ввода значений: 
### Обязательность поля Обязательность поля задаётся с помощью свойства  `required` .
Если поле является обязательным, то у компонента появляется специальный индикатор. Наличие индикатора регулируется свойством  `hasRequiredIndicator` .
Изменить расположение индикатора можно с помощью свойства  `requiredPlacement` , которое принимает значения  `left`  и  `right` .