캠페인 예산 배분

<div class="allocator"><div class="head">$1,000 TOTAL <b id="outcome">42 EXPECTED SALES</b></div><div class="campaign"><span>CAMPAIGN A</span><div class="track"><i id="a"></i></div><b id="av">$500</b></div><div class="campaign"><span>CAMPAIGN B</span><div class="track"><i id="b"></i></div><b id="bv">$500</b></div><input id="split" type="range" min="20" max="80" value="50" aria-label="Budget share for campaign A"><div class="hint">MOVE BUDGET BETWEEN CAMPAIGNS</div></div>

.allocator{width:min(88%,500px);padding:clamp(12px,3vmin,24px);background:var(--surface);border:1px solid var(--line);font:800 clamp(10px,max(2vmin,1vw),16px)/1.2 sans-serif}.head,.campaign{display:flex;align-items:center;justify-content:space-between;gap:8px}.head{border-bottom:2px solid var(--fg);padding-bottom:clamp(8px,2vmin,15px)}.head b{color:var(--accent);font-size:max(10px,1vw,.75em)}.campaign{margin:clamp(11px,2.5vmin,20px) 0}.campaign span{min-width:30%}.campaign b{min-width:15%;text-align:right}.track{flex:1;background:var(--line);height:clamp(10px,2.5vmin,20px)}.track i{display:block;height:100%;background:var(--accent);transition:width .35s}.campaign:nth-of-type(3) .track i{background:var(--accent-3)}input{width:100%;accent-color:var(--accent);margin-top:8px}.hint{text-align:center;color:var(--muted);font-size:max(10px,1vw,.7em);letter-spacing:.08em;margin-top:5px}

const range=document.querySelector('#split');function draw(){const a=Number(range.value),b=100-a;document.querySelector('#a').style.width=a+'%';document.querySelector('#b').style.width=b+'%';document.querySelector('#av').textContent='$'+a*10;document.querySelector('#bv').textContent='$'+b*10;document.querySelector('#outcome').textContent=Math.round(20*Math.sqrt(a/50)+22*Math.sqrt(b/50))+' EXPECTED SALES'}range.addEventListener('input',()=>{clearInterval(timer);draw()});let d=10;const timer=setInterval(()=>{let n=Number(range.value)+d;if(n>=80||n<=20)d*=-1;range.value=String(n);draw()},800);draw();