JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://shadow.perm.ru/test/homeheat/build/js/libs/nouislider.min.js"></script>
<link rel="stylesheet" href="//shadow.perm.ru/test/homeheat/build/css/libs/nouislider.min.css">
     
<div class="sliderbox">
     <div class="sliderbox-slider"></div>

     <input class="sliderbox-input-min">
     – 
     <input class="sliderbox-input-max">
</div>   
         
<div class="sliderbox">
     <div class="sliderbox-slider"></div>

     <input class="sliderbox-input-min">
     – 
     <input class="sliderbox-input-max">
</div> 
         
<div class="sliderbox">
     <div class="sliderbox-slider"></div>

     <input class="sliderbox-input-min">
     – 
     <input class="sliderbox-input-max">
</div>

CSS

.sliderbox {
    margin: 50px;
}

.sliderbox-slider {
    margin-bottom: 20px;
}

JavaScript

Sliderbox = function(options) {
	
    this.options = options;
    
    this.init();
    
};

Sliderbox.prototype.init = function() {

    var box = document.querySelectorAll(this.options.target),
        len = box.length,
        i = 0;

    for (; i < len; i++) {

        this.handler(box[i]);

    }

};

Sliderbox.prototype.handler = function(target) {

    var slider = target.querySelector('.sliderbox-slider'),
        inpMin = target.querySelector('.sliderbox-input-min'),
        inpMax = target.querySelector('.sliderbox-input-max');

    noUiSlider.create(slider, this.options);

    slider.noUiSlider.on('update', function( values, handle ) {
        if ( handle ) {
            inpMax.value = values[handle];
        } else {
            inpMin.value = values[handle];
        }        
    });

    target.addEventListener('change', function(e) {

        if (e.target === inpMin) {

            slider.noUiSlider.set([e.target.value]);

        }
        else {

            slider.noUiSlider.set([null, e.target.value]);

        }

    });

};

//

new Sliderbox({
    target: '.sliderbox',
    
    start: [ 20, 80 ], // Handle start position
    step: 10, // Slider moves in increments of '10'
    margin: 20, // Handles must be more than '20' apart
    connect: true, // Display a colored bar between the handles
    behaviour: 'tap-drag', // Move handle on tap, bar is draggable
    range: { // Slider can select '0' to '100'
        'min': 0,
        'max': 100
    }
});