JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/ui-darkness/jquery-ui.css">
<div id="sliders" class="ui-corner-all">
<table><tr><td>
<h1 class="ui-corner-all">MASTER</h1>
<div id="master"></div>
<div id="other1"></div><div id="other2" style=""></div>

<div id="other3"></div><div id="other4"></div>

</td><td><input type="text" id="amount" /></td></tr></table>
</div>

CSS

body {
background: black   
}
#sliders {
width: 450px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: rgb(255,255,255);  
background: rgba(255,255,255,0.5);   
}
td:nth-child(1) {
width: 100px
}
h1 {
font-weight: bold;
padding: 5px;
background: rgb(255,255,255);  
background: rgba(255,255,255,0.5);   
}
#master {
width:340px; 
margin:10px;  
}
#other1{
width:130px; 
margin:10px;
float:left; 
}
#other2{
width:130px; 
margin:10px;
float:right; 
}
#other3{
width:130px;
margin:10px;
float:left;   
}
#other4{
width:130px;
margin:10px;
float:right; 
}
#amount {
border:0;
background:transparent;
font-weight:bold;
width:50px;
}

JavaScript

$(function() {
    // setup master volume
    $("#master").slider({
        value: 60,
        min: 0,
        max: 1200,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: function( event, ui ) {
                $( "#amount" ).val( ui.value + " Lt" );
                $("#other1").slider( "option", "value", (ui.value / 1200) * 100);
                $("#other2").slider( "option", "value", (ui.value / 1200) * 500);
                $("#other3").slider( "option", "value", (ui.value / 1200) * 200);
                $("#other4").slider( "option", "value", (ui.value / 1200) * 400);
            }
    });
    $( "#amount" ).val( $( "#master" ).slider( "value" ) + " Lt" );
    // Other1
    $("#other1").slider({
        value: 60,
        min: 0,
        max: 100,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: setMasterValue
    });
        //Other2
    $("#other2").slider({
        value: 60,
        min: 0,
        max: 500,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: setMasterValue
    });
        // Other3
    $("#other3").slider({
        value: 60,
        min: 0,
        max: 200,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: setMasterValue
    });
        // Other4
    $("#other4").slider({
        value: 60,
        min: 0,
        max: 400,
        orientation: "horizontal",
        range: "min",
        animate: true,
        slide: setMasterValue
    });
    
    function setMasterValue( event, ui ) {
        var masterValue = 
            $( "#other1" ).slider( "option", "value" ) +
            $( "#other2" ).slider( "option", "value" ) +
            $( "#other3" ).slider( "option", "value" ) +
            $( "#other4" ).slider( "option", "value" );
         $("#master").slider( "option", "value", masterValue );
    }
});