こんな感じでしょうか?
調整
javascript
1HTMLInputElement.prototype.input=function(){
2 const e = new CustomEvent("HTMLEvents");
3 e.initEvent('input', true, true );
4 this.dispatchEvent(e);
5}
6document.addEventListener('input',e=>{
7 const t=e.target;
8 const r=[...document.querySelectorAll('[type=range]')];
9 if(t.matches('[type=range]')){
10 if(r.indexOf(t)<r.length-1){
11 const next=r[r.indexOf(t)+1];
12 next.max=t.max-t.valueAsNumber+1;
13 next.input();
14 };
15 t.nextElementSibling.textContent=t.valueAsNumber;
16 }
17 sum.textContent=r.reduce((x,y)=>x+y.valueAsNumber,0);
18});
19window.addEventListener('DOMContentLoaded', ()=>{
20 document.querySelectorAll('[type=range]').forEach(x=>{
21 x.input();
22 });
23});
24</script>
25A:<input type="range" min="1" max="252" value="1"><span></span><br>
26B:<input type="range" min="1" max="252" value="1"><span></span><br>
27C:<input type="range" min="1" max="252" value="1"><span></span><br>
28D:<input type="range" min="1" max="252" value="1"><span></span><br>
29合計:<span id="sum"></span>
幅を変えない
(微妙におかしいかも)
javascript
1<script>
2HTMLInputElement.prototype.input=function(){
3 const e = new CustomEvent("HTMLEvents");
4 e.initEvent('input', true, true );
5 this.dispatchEvent(e);
6}
7document.addEventListener('input',e=>{
8 const t=e.target;
9 const r=[...document.querySelectorAll('[type=range]')];
10 if(t.matches('[type=range]')){
11 const max=Number(t?.dataset.max??t.max);
12 if(t.valueAsNumber>=max){
13 t.valueAsNumber=max;
14 }
15 if(r.indexOf(t)<r.length-1){
16 const next=r[r.indexOf(t)+1];
17 next.dataset.max=max-t.valueAsNumber+1;
18 next.input();
19 };
20 t.nextElementSibling.textContent=t.valueAsNumber;
21 }
22 sum.textContent=r.reduce((x,y)=>x+y.valueAsNumber,0);
23});
24window.addEventListener('DOMContentLoaded', ()=>{
25 document.querySelectorAll('[type=range]').forEach(x=>{
26 x.input();
27 });
28});
29</script>
30A:<input type="range" min="1" max="252" value="1"><span></span><br>
31B:<input type="range" min="1" max="252" value="1"><span></span><br>
32C:<input type="range" min="1" max="252" value="1"><span></span><br>
33D:<input type="range" min="1" max="252" value="1"><span></span><br>
34合計:<span id="sum"></span>