I'm trying to make a page where the user can change some input range, and I want the sum of their values to always be 100. To do this, I want that if one input has a value of 25, the other has a value of 75, for example. The thing is that changing the value of "angleslider" changes the value of "minimumslider", but not the other way around. Also, the display of the value of minimumslider doesn't work when you change the value of angleslider.
var angleslider;
var minimumslider;
function setup() {
angleslider = createSlider(0, 100, 3);
minimumslider = createSlider(0, 100);
setInterval(function(){
angleslider.attribute("value", 100 - minimumslider.value());
minimumslider.attribute("value", 100 - angleslider.value());
}, 0);
};
(I'm using p5.js but if the solution doesn't need p5, all the better) Any ideas?
You can control the value with the "input" event and modify the value of the other slider easily: