react-steps-slider

React Input Steps Slider

Demo

Demo

Usage

<SliderSteps
  steps={[
    [50000, 100000, 1000],
    [100000, 1000000, 100000],
    [1000000, 5000000, 500000],
    [5000000, 9000000, 1000000],
  ]}
  inputLabels={['₽', '₽', '₽']}
  sliderLabels={['₽', '₽', '₽']}
  isShowLegend
  defaultValue={300000}
/>

<SliderSteps
  steps={[
    [3, 5, 1],
    [5, 12, 1],
    [12, 18, 1],
  ]}
  inputLabels={['месяц', 'месяца', 'месяцев']}
  sliderLabels={['мес', 'мес', 'мес']}
  isShowLegend
  defaultValue={10}
/>

API

Название	Тип	Описание
className	string	Устанавливает стиль контейнера слайдера
classNameTrack	string	Устанавливает стиль трека слайдера
classNameActiveTrack	string	Устанавливает стиль активного трека слайдера
classNameSlider	string	Устанавливает стиль бегунка слайдера
defaultValue	number	Устанавливает значение по умолчанию
steps	[number, number, number][]	Устанавливает шаги в формате диапазонов: [начальное значение, конечное значение, шаг]
inputLabels	strings[]	Устанавливает лейбл для текстового поля
sliderLabels	strings[]	Устанавливает лейблы для диапазонов
isShowLegend	boolean	Флаг отображения легенды
isShowSliderLabel	boolean	Флаг отображения названий на слайдере
onChange	function	Обработчик значений