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) {
v = data[opts2.linear].value * opts2.max / data[opts2.linear].max;
if (v == this.value) {
var i;
var calc = function () {
return i * i / A.max * B.max;
};
if (ui.value < oldValue) {
for (i = A.value; i > 0; i-- ) {
if (calc() < oldValue) {
break;
}
}
} else {
for (i = A.value; i < A.max; i++ ) {
if (calc() > oldValue) {
break;
}
}
}
A.value = i;
B.value = A.value / A.max * B.max;
} else...