JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<p>
  <label for="amount">Trust Value:</label>
  <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;">
</p>
<div id="slider-range-max"></div>

CSS

.ui-widget-header{
    background: none;
}
.red .ui-slider-range {
    background-color: #ff0000;
}
.green .ui-slider-range {
    background-color: #00ff00;
}

JavaScript

$(function() {
    $( "#slider-range-max" ).slider({
      range: "min",
      min: 0,
      max: 10,
      value: 0,
      step: .001,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        if(ui.value < 5){
          $("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;");
          $('#slider-range-max').removeClass('green');
          $('#slider-range-max').addClass('red');
        
        }
         else{
          $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;");
            $('#slider-range-max').removeClass('red');
          $('#slider-range-max').addClass('green');
         }

      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });