The problem is under-specified. When you move a slider, how should the other two adjust? There are many possible solutions and you haven't specified any preference here.
The easiest solution is to maintain a fixed order of preference, something like:
values = [a:0, b:0, c:0]
fn onChange(key, value) {
values[key] = value
for (k,v) in values {
if (k !== key) values[k] = adjust(k)
}
}
fn adjust(key) {
switch(key) {
case 'a': return max(0, values[c] - values[b])
case 'b': return max(0, values[c] - values[a])
case 'c': return values[a] + values[b]
}
}
The alternative is to maintain the latest selections made by the user and use that as the iteration order.
Whatever approach you go with, the "single source of truth" approach of react/vue/svelte + state (whether it is state in hooks, redux, mobx or whatever) holds. The "values" above is the source of truth, and the components just reflect that.
In other words: from a state point of view you don't have three sliders each with a value but a "three-valued component that happens to be shown as three sliders".
The easiest solution is to maintain a fixed order of preference, something like:
The alternative is to maintain the latest selections made by the user and use that as the iteration order.Whatever approach you go with, the "single source of truth" approach of react/vue/svelte + state (whether it is state in hooks, redux, mobx or whatever) holds. The "values" above is the source of truth, and the components just reflect that.
In other words: from a state point of view you don't have three sliders each with a value but a "three-valued component that happens to be shown as three sliders".