JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<!DOCTYPE HTML>
<div class="WS_Slider" id="WSSlider0"></div>
<div class="WS_Slider" id="WSSlider1"></div>
<div class="WS_Slider" id="WSSlider2"></div>
<div class="WS_Slider" id="WSSlider3"></div>
<div class="WS_Slider WS_ReadOnly" id="WSSlider4"></div>

CSS

a.ui-slider-handle,a.ui-slider-handle:hover,.ui-slider-handle {
    text-align:center;
    padding:5px;
    font-size:18px;
    text-decoration:none;
}
 
.ui-slider .ui-slider-handle {border:solid 2px #000;}
 
.WS_Slider{width:700px; border:solid 2px #000; height:26px; margin:10px;}
 
.WS_Slider_Marker {display:block; z-index:1; height:26px;}

JavaScript

function hexFromRGB(r, g, b) {
    var hex = [r.toString( 16 ),g.toString( 16 ),b.toString( 16 )];
    $.each( hex, function( nr, val ) {if ( val.length === 1 ) {hex[ nr ] = "0" + val;}});
    return hex.join( "" ).toUpperCase();
    }

function update_slider( e, ui ) {
    var red = 255, green = 255, blue = 0, value = $( this ).slider( "option", "value" );

    if ( value <= 60 ) {
        green = Math.round( value * 3.6 );
    }
    
    if ( value > 80 ) {
        red = Math.round( 255 - (( value - 80) * 7));
    }

    $( this )
        .find( ".ui-slider-range" )
            .css( "background", "#" + hexFromRGB( red, green, blue ) )
            .end() // Reset the chain back to $( this )
        .find( ".ui-slider-handle" )
            .text( value );
    if ( ! $( this ).hasClass( "WS_ReadOnly" ) ) {
        update_average();
    }
}

function update_average() {
    var value = 0, i = 0;
    for ( i; i < 4; i++ ) {
          value += sliders.eq( i ).slider( "value" );
    };
    value = Math.round( value / 4 );
    sliders.eq( 4 ).slider( "option", "value", value ).trigger( "slide" );
}

var sliders,
    defaults = {
            orientation: "horizontal",
            range: "min",
            min: 0,
            max: 100,
            animate: true
        };
 
$(function() {
    sliders = $(".WS_Slider");
    
    $.each( [ 40, 50, 60, 70, 54 ], function ( i, value ) {
        sliders.eq( i )
            .bind( "slidecreate slide", update_slider )
            .slider( $.extend( {}, defaults, { value: value }) );
    });
    
    // Make the fifth slider read only
    sliders.eq(4).bind("slide", function () { return false; });
});