JSFiddle - React, Tailwind, and code Playground

HTML

<center><div id="planlabel"><p>
  <label for="amount">Item:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p></div>
<div id="slider"></div></center>

CSS

#slider {
width: 300px;
}
#itemlabel {
text-align: center;
}

JavaScript

$(function() {
    var valMap = [8.00, 9.00, 10.00, 11.00];
    $("#slider").slider({
        min: 0,
        max: 3,
         scale: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
         values: [ 8, 12],
        change: function(event, ui) {   
            $( "#amount" ).val( ui.values[ 0 ]  + ui.values[ 1 ] );
      //      $("#amount").val( valMap[$("#slider").slider("value")]  + '.00');            
        }       
    });
 //   $("#amount").val( valMap[$("#slider").slider("value")] + '.00');
    $( "#amount" ).val(  $( "#slider" ).slider( "values", 0 ) +
" - " + $( "#slider" ).slider( "values", 1 ) );
});