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 constraints = [
['max', 'A', 1000],
['value', 'A', 500],
['step', 'A', 1],
['=', 'B', ['/', 'A', 500]],
['=', 'C', ['*', 'A', 'B']],
['=', 'A', ['*', 'B', 500]],
['=', 'A', ['sqrt', ['*', 'C', 500]]],
['=', 'B', ['sqrt', ['/', 'C', 500]]],
];
var data = {
// A: {},
// B: {},
// C: {},
};
$.each(constraints, function (k, rules) {
if (rules[0] == '=') {
if (!data[rules[1]]) {
data[rules[1]] = {};
}
}
});
$.each(data, function (name, opts) {
data[name].equalities = {};
});
var findVariables = function (found, object) {
if (typeof object == 'string' && data[object]) {
found.push(object);
} else if (typeof object == 'object') {
$.each(object, function (k, v) {
findVariables(found, v);
});
}
};
$.each(constraints, function (k, rules) {
if (rules[0] == '=') {
var found = [];
findVariables(found, rules[2]);
$.each(found, function (k, v) {
data[rules[1]].equalities[v] = rules[2];
});
//data[rules[1]].equalities.push(rules[2]);
} else {
data[rules[1]][rules[0]] = rules[2];
}
});
var evalRule = function (rule, dim) {
if (typeof rule == 'string') {
if (!data[rule][dim || 'value']) {
throw new Error(rule + ' is undefined');
}
return data[rule][dim || 'value'];
}
if (typeof rule != 'object') {
return rule;
}
var res;
switch (rule[0]) {
case '*':
res = 1;
for (var i = 1; i < rule.length; i++) {
res *= evalRule(rule[i], dim);
}
break;
case '/':
...