Slider component
Установка
Добавить компонент в качестве зависимости проекта
npm install --save @alfabank/core-slider
или
yarn add @alfabank/core-slider
Пример использования
Импорт компонента
import Slider from '@alfabank/core-slider';
render
вашего компонента/приложения
Использование в методе <Slider
value={someValue}
initialValue={someInitialValue}
label="someLabel"
min="100"
max="10000"
suffix="₽"
name="basic_slider"
theme={someTheme}
onChange={someCallback}
/>
Интерфейсы
В callback onChange
приходят аргументы ({event, value, name, formId})
:
-
event
- стандартное событие e -
value
- новое значение -
name
- id слайдера -
formId
- id формы, в которой расположен слайдер
Props компонента
prop | type | required | default | description |
---|---|---|---|---|
value | number | null |
Значение слайдера. | |
initialValue | number | yes | Стартовое значение слайдера. | |
label | string | null |
Текстовая метка слайдера. | |
onChange | func | yes | Обработчик события изменения значения слайдера. | |
theme | string | yes | Тема компонента | |
min | number | yes | Минимальное числовое значение слайдера | |
max | number | yes | Максимальное числовое значение слайдера | |
name | oneOfType([string, number]) | yes | name слайдера | |
formId | oneOfType([string, number]) | null |
id формы, в которой расположен слайдер | |
className | string | '' |
Имя css класса (в случае если нужно изменить стандартные стили. | |
suffix | string | '' |
Суффикс значения слайдера, например, 'лет' или '$' | |
disabled | bool | false |
Неактивен ли компонент. |