지불 의향

<div class="wtp"><div class="people" id="people"></div><div class="ruler"><span>$20</span><input id="cut" type="range" min="20" max="100" value="55"><span>$100</span></div><div class="result">AT THIS PRICE <b id="count">0</b> OF 12 BUY</div></div>

.wtp{width:min(92%,550px);font:900 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.people{display:flex;align-items:end;justify-content:space-between;height:clamp(70px,25vmin,160px);border-bottom:2px solid var(--line);gap:2px}.person{width:7%;background:var(--accent);border-radius:20px 20px 3px 3px;transition:opacity .3s,transform .3s;position:relative}.person::before{content:'';position:absolute;left:22%;top:-15px;width:56%;aspect-ratio:1;background:inherit;border-radius:50%}.person.off{opacity:.2;transform:scale(.9)}.ruler{display:flex;align-items:center;gap:5px;margin-top:12px}.ruler input{flex:1;accent-color:var(--accent)}.result{margin-top:10px;background:var(--accent-2);color:#211b19;padding:8px;text-align:center}.result b{font-size:clamp(20px,5vmin,34px)}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}

const values=[24,28,35,39,44,49,53,58,64,73,84,96],box=document.querySelector('#people');box.innerHTML=values.map(v=>'<i class="person" style="height:'+(25+v*.55)+'%"></i>').join('');const slider=document.querySelector('#cut');function draw(){const p=+slider.value;document.querySelectorAll('.person').forEach((e,i)=>e.classList.toggle('off',values[i]<p));document.querySelector('#count').textContent=values.filter(v=>v>=p).length}slider.oninput=draw;draw();setTimeout(()=>{slider.value=75;draw()},650);setTimeout(()=>{slider.value=55;draw()},2600);