JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>


<span id="ColorScalerTitle">Color Scaling</span>
 
<div id="red">
<span id="redScale">1</span></div>
<div id="green">
<span id="greenScale">1</span></div>
<div id="blue">
<span id="blueScale">1</span></div>

 
</body>

CSS

#ColorScalerTitle{
   float: left;
    margin-left: 120px;
 }
 
  #red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  
 #redScale, #greenScale, #blueScale {
    margin-left: 320px;
  }

  #red .ui-slider-range { background: #FF0000; }
  #red .ui-slider-handle { border-color: #FF0000; }
  #green .ui-slider-range { background: #00FF00; }
  #green .ui-slider-handle { border-color: #00FF00; }
  #blue .ui-slider-range { background: #0000FF; }
  #blue .ui-slider-handle { border-color: #0000FF; }

JavaScript

$( function() {

    function refreshValues() {
      var red = $( "#red" ).slider( "value" ),
        green = $( "#green" ).slider( "value" ),
        blue = $( "#blue" ).slider( "value" );
      document.getElementById("redScale").innerHTML=red/100;
      document.getElementById("greenScale").innerHTML=green/100;
      document.getElementById("blueScale").innerHTML=blue/100;
    }
 
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 200,
      value: 100,
      slide: refreshValues,
      change: refreshValues
    });
    $( "#red" ).slider( "value", 100 );
    $( "#green" ).slider( "value", 100 );
    $( "#blue" ).slider( "value", 100 );
  } );