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() {
    var data = {
        A: { value: 500, min: 0, max: 1000, step: 1, linear: 'B' },
        B: { value: 1, min: 0, max: 2, step: 0.01, linear: 'A' },
        C: { value: 500, min: 0, max: 2000, step: 1, product:['A', 'B'] },
    };
    var A = data.A, B = data.B, C = data.C;
    var sliders = {};
    $.each(data, function (name, opts) {
        $("#slider" + name).slider({
            range: "min",
            value: opts.value,
            min: opts.min,
            max: opts.max,
            step: opts.step,
            slide: function(event, ui) {
                var oldValue = data[name].value;
                data[name].value = ui.value;
                $.each(data, function (name2, opts2) {
                    if (name2 != name) {
                        var v;
                        if (opts2.linear) {
                            var linearRatio = opts2.max / data[opts2.linear].max;
                            if (opts.product) {
                                opts2.value = Math.sqrt(data[name].value * linearRatio);
                            }
                            if (opts.linear) {
                                opts2.value = data[opts2.linear].value * linearRatio;
                            }
                        }
                        if (opts2.product) {
                            v = 1;
                            $.each(opts2.product, function (k, prod_name) {
                                v *= data[prod_name].value;
                            });
                            opts2.value = v;
                        }
                        $("#slider" + name2).slider("value", opts2.value);
                    }
                });
                updateValues();
            }
        });
    });
});
function updateValues()
{
    $("#amountA").val($("#sliderA").slider("value"));
    $("#amountB").val($("#sliderB").slider("value"));
    $("#amountC").val($("#sliderC").slider("value"));
}