JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="slider"></div>
<div class="slider_count">
    <span class="first"></span> -
    <span class="second"></span>
</div>

<div class="slider2"></div>
<div class="slider_count">
    <span class="first2"></span> -
    <span class="second2"></span>
</div>

CSS

body {
    padding: 20px;
}
.slider, .slider2 {
    margin: 20px 0;
}
.slider_count {
    margin: 0 0 20px 0;
    text-align: center;
}

JavaScript

jQuery(document).ready(function($) {
    $('.slider').slider({
        min: 0,
        max: 50,
        step: 0.01,
        range: true,
        slide: function(e, ui) {
            $('.first').text(ui.values[0]);
            $('.second').text(ui.values[1]);
        }
    });
    
    $('.slider2').slider({
        min: 0,
        max: 100,
        step: 0.01,
        range: true,
        slide: function(e, ui) {
            $('.first2').text(ui.values[0]);
            $('.second2').text(ui.values[1]);
        }
    });
});