JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>
<div id="min"></div>
<div id="max"></div>

CSS

#slider {
  height: 3px;
  width: 220px;
  background-color: #dedede;
  color: #ce0058;
}

#slider .ui-slider-range {
  background: #ce0058;
}

#slider .ui-slider-handle {
  background: #ffffff;
  border-color: #dedede;
  border-radius: 50%;
  linear-gradient: none;
}

#slider .ui-slider-handle:focus {
  outline: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#min,
#max {
  position: absolute;
  width: 50px;
  text-align: center;
  border: 0;
  color: #ce0058;
  font-size: 12px;
  font-family: "Lato";
  color: rgb(178, 178, 178);
}

JavaScript

$(document).ready(function() {

  $("#slider").slider({
    range: true,
    min: 0,
    max: 1000,
    step: 10,
    values: [0, 1000],
    slide: function(event, ui) {
      var delay = function() {
        //var handleIndex = $(ui.handle).data('index.uiSliderHandle');
        var handleIndex = $(ui.handle).index();
        var label = handleIndex == 1 ? '#min' : '#max';
        $(label).html(ui.value + '€').position({
          my: 'center top',
          at: 'center bottom',
          of: ui.handle,
          offset: "0, 10"
        });
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });

  $('#min').html($('#slider').slider('values', 0) + '€').position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider span:eq(0)'),
    offset: "0, 10"
  });

  $('#max').html($('#slider').slider('values', 1) + '€').position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider span:eq(1)'),
    offset: "0, 10"
  });

});