JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="slider range-slide">
    <span class="slider-title"><b>Slider1</b></span>
<span class="amount"></span>
<div id="slider1" class="slide" value="1,99" min="1" max="99"></div> 
</div> 

<div class="slider range-slide">
    <span class="slider-title"><b>Slider2</b></span>
<span class="amount"></span>
<div id="slider2" class="slide" value="1,99" min="1" max="99"></div> 
</div>

CSS

.ui-slider { position: relative; text-align: left; display:inline-block; width: 300px;}
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-slider{background:black;}
.ui-slider-handle{background:red;}

/* Style slider als tabulair */
.slider-title { display:inline-block; width: 100px; }
.amount { display: inline-block; width: 100px }
.slide { width: 300px }

JavaScript

$(document).ready(function() {

    $(".range-slide div.slide").each(function() {

        values = $(this).attr('value').split(',');
        firstVal = values[0];
        secondVal = values[1];

        $(this).slider({
            values: [firstVal, secondVal],
            min: parseInt($(this).attr('min')),
            max: parseInt($(this).attr('max')),
            range: true,
            slide: function(event, ui) {
                $("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]);
            }
        });
        $(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1));

    });

});