JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
 <div id="slider1" style="width: 100px"> </div>
 <div id="slider2" style="width: 100px"> </div>

 <input id="amount" type="text" />
 <input id="amount2" type="text" />
 <input id="amount3" type="text" />

JavaScript

$(document).ready(function() {
    $("#slider1").slider({
        min: 0,
        max: 100,
        slide: function(event, ui) {
            update();
        }
    });

    $("#slider2").slider({
        min: 0,
        max: 100,
        slide: function(event, ui) {
            update();
        }
    });
    
    update();
});

function update() {
     $amount1 = $("#slider1").slider("values", 0);
     $amount2 = $("#slider2").slider("values", 0);
     $amount3 = $amount1 + $amount2;
     $("#amount").val($amount1);
     $("#amount2").val($amount2);
     $("#amount3").val($amount3);
}