slider-react-range

Чтобы установить пакет, необходимо в терминале прописать npm i slider-react-range

Usage no npm install needed!

<script type="module">
  import sliderReactRange from 'https://cdn.skypack.dev/slider-react-range';
</script>

README

React-Slider-Range

alt text

Установка

  1. Чтобы установить пакет, необходимо в терминале прописать npm i slider-react-range

Использование

  1. Необходиом импортировать его в компоненту и использовать.
    import SliderRange from 'slider-react-range'
        
    function Test() {
      return (
        <div className="test">
          <SliderRange />
        </div>
      );
    }
    
    export default Test;

SliderRange принимает несколько необязательных пропс:

Название Что принимает Что делает
min number Минимальное значение диапазона
max number Максимальное значение диапазона
style object Переопределяет стили
leftText string Текст для левого лэйбла
rightText string Текст для правого лэйбла

Стили необходимо передавать следующим образом:

{
    [название класса]: {
        'название стиля': 'значение'
    }
}

{
    input_left: {
        'color': 'red',
        'height': '25px'
    },

    right: {
        'background-color': 'red',
        'width': '25px'
    },
}

Доступные классы: Класс | Что делает --- | --- range | Переназначает класс у основного блока check | Переназначает класс у выделенной области left | Переназначает класс у левой кнопки right | Переназначает класс у правой кнопки input_left | Переназначает класс у левого лэйбла input_right | Переназначает класс у правого лэйбла