@alfabank/core-slider

Установка

Добавить компонент в качестве зависимости проекта

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 | Неактивен ли компонент. |