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 label = handleIndex == 0 ? '#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 a:eq(0)'),
      offset: "0, 10"
  });

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

});