JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="amountA"/>
<input type="text" id="amountB"/>
<input type="text" id="amountC"/>

<div id="sliderA"></div><br />
<div id="sliderB"></div><br />
<div id="sliderC"></div>

JavaScript

$(function() {
    $("#sliderA").slider({
        range: "min",
        value: 500,
        min: 0,
        max: 1000,
        step: 1,
        slide: function(event, ui) {
            $("#sliderB").slider("value", $("#sliderA").slider("value")/500);
            $("#sliderC").slider("value", $("#sliderA").slider("value")*$("#sliderB").slider("value"));
            updateValues();
        }
    }); 
   $("#sliderB").slider({
        range: "min",
        value: 1,
        min: 0,
        max: 2,
        step:0.01,
        slide: function(event, ui) {
            $("#sliderA").slider("value", $("#sliderB").slider("value")*500);
            $("#sliderC").slider("value", $("#sliderA").slider("value")*$("#sliderB").slider("value"));
            updateValues();
        }
    });
    $("#sliderC").slider({
        range: "min",
        value: 500,
        min: 0,
        max: 2000,
        step: 1,
        slide: function(event, ui) {
             updateValues();
        }
    });
});
function updateValues()
{
    $("#amountA").val($("#sliderA").slider("value"));
    $("#amountB").val($("#sliderB").slider("value"));
    $("#amountC").val($("#sliderC").slider("value"));
}