JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider">
	<div class="tooltipWrapper">
		<span class="tooltip"></span>
	</div>
</div>

<div style="float:left;clear::both">
This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph
This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph
</div>
<script type="text/javascript" language="JavaScript">

function getTheColor( colorVal ) {
  	var theColor = "";
  	if ( colorVal < 50 ) {
			    myRed = 255;
			    myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
		  }
	  else 	{
			    myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
			    myGreen = 255;
		  }
	  theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
  	return( theColor ); 
}

function refreshSwatch() {
	var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
	myColor = getTheColor( coloredSlider );

	$('.tooltip').text(coloredSlider).css({'background':myColor,'display':'block','left':Math.round($( ".ui-slider-handle").position().left-15)});
	//document.styleSheets[0].addRule('.tooltip::before,.tooltip::after', 'border-bottom-color:"'+myColor+'"', 0); 
	//document.styleSheets[0].rules[0].style.borderBottomColor= myColor+"!important";
	
	$( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );

	$( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
}

$(function() {
	  $( "#coloredSlider" ).slider({
		    orientation: "horizontal",
		    range: "min",
		    max: 100,
		...

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
}
#coloredSlider {
	float: left;
	clear: left;
width: 600px;
	margin: 15px;
}
#coloredSlider .ui-slider-range { 
	background: #ff0000; 
}

#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default {
	background: none;
	background-color: #FFF;
}
.tooltipWrapper{
  position:relative;
}

.tooltip {
    position: absolute;
    display: none;
    top:20px;
	border: 1px solid transparent;
    text-decoration: none;
    border-radius: 2px;
    padding: 10px;
    border-radius: 5px;
}