Have a mainslider – this fills up total points field.
subsliders take points from the total points until it reaches 0. can’t go below zero.
added some code, show what i have. subsliders nicely take over maximum from the mainslider.
when i reduce mainsliders, so do subsliders.
right now subsliders only look at max from mainslider as their max. but what should happen, if there isn’t enough points left, it should take another Max.
Example:
You’ll see if you max out main bar, you can max out sub slider 1 and 2, but the 3th slider should be blocked after a few points, because it takes spent points below zero
Anyone able to alter the code this way?
let slider = document.getElementById("sliderMain");
let output = document.getElementById("outMain");
let slider1 = document.getElementById("sub1");
let output1 = document.getElementById("out1");
let slider2 = document.getElementById("sub2");
let output2 = document.getElementById("out2");
let slider3 = document.getElementById("sub3");
let output3 = document.getElementById("out3");
let cumul1Line = [0,0,2,5,9,14,20,27,35,44,54,65,77,90,104,119,135,152,170,189,209,230,252,275,299,324,350,377,405,434,464,495,527,560,594,629,665,702,740,779,819,860,902,945,989,1034,1080,1127,1175,1224,1274];
let mainTotal = [0,2,5,9,14,27,42,59,78,100,124,150,178,208,241,276,313,352,393,437,483,531,851,633,688,754,804,865,928,994,1062,1132,1204,1278,1355,1434,1515,1598,1683,1771,1815,1905,1950,2042,2088,2182,2229,2325,2373,2472,2521,2622,2672,2775,2826,2931,2983,3090,3143,3253];
function outMain(e){
output.innerHTML = slider.value;
const io = e.currentTarget.elements;
let max = io.outMain.value;
io.total.value = mainTotal[io.outMain.value];
io.spent.value = +io.points1.value + +io.points2.value + +io.points3.value;
io.left.value = io.total.value - io.spent.value;
io.sub1.max = max;
io.out1.value = io.sub1.value;
io.points1.value = cumul1Line[io.out1.value]
io.sub2.max = max;
io.out2.value = io.sub2.value;
io.points2.value = cumul1Line[io.out2.value]
io.sub3.max = max;
io.out3.value = io.sub3.value;
io.points3.value = cumul1Line[io.out3.value]
};
document.forms.ui.oninput = outMain;#total,#spent,#left{width:50px;}<form id="ui">
<div id="mainslider">
<label for="main" class="labels2">Level</label><output form="ui" id="outMain"></output>
<input type="range" min="1" max="50" value="1" step="1" class="slider" id="sliderMain">
<input type="number" min="0" value="0" id="total">
<input type="number" min="0" value="0" id="spent">
<input type="number" min="0" value="0" id="left">
</div>
<div id="subslider1">
<output form="ui" id="out1">1</output>
<input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub1">
<input type="number" min="0" value="0" id="points1">
</div>
<div id="subslider1">
<output form="ui" id="out2">1</output>
<input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub2">
<input type="number" min="0" value="0" id="points2">
</div>
<div id="subslider1">
<output form="ui" id="out3">1</output>
<input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub3">
<input type="number" min="0" value="0" id="points3">
</div>
</form>