縦スワイプで明るさ調整

<div class="d08-08-12-panel" id="d08-08-12-panel">
          <div class="d08-08-12-fill" id="d08-08-12-fill" style="height:60%"></div>
          <div class="d08-08-12-icon">☀</div>
          <div class="d08-08-12-val" id="d08-08-12-val">60%</div>
          <p class="d08-08-12-hint">縦にスワイプ</p>
        </div>

.d08-08-12-panel{position:relative;width:120px;height:180px;border-radius:16px;background:#1c1d29;overflow:hidden;touch-action:none;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto}
        .d08-08-12-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#ffd166,#ff9f43)}
        .d08-08-12-icon{position:relative;z-index:1;font-size:22px;margin-bottom:6px;color:#fff}
        .d08-08-12-val{position:relative;z-index:1;color:#fff;font-weight:800;font-size:14px}
        .d08-08-12-hint{position:relative;z-index:1;color:rgba(255,255,255,.65);font-size:10px;margin:4px 0 14px}

(function(){
        var root=document.getElementById('item-08-08-12');if(!root)return;
        var panel=root.querySelector('#d08-08-12-panel'),fill=root.querySelector('#d08-08-12-fill'),val=root.querySelector('#d08-08-12-val');
        if(!panel||!fill)return;
        var dragging=false,startY=0,startPct=60;
        function clamp(n){return Math.min(100,Math.max(0,n));}
        panel.addEventListener('pointerdown',function(e){
          dragging=true;startY=e.clientY;startPct=parseFloat(fill.style.height)||60;
          try{panel.setPointerCapture(e.pointerId);}catch(err){}
        });
        panel.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var dy=startY-e.clientY;
          var pct=clamp(startPct+(dy/panel.clientHeight)*100);
          fill.style.height=pct+'%';
          if(val)val.textContent=Math.round(pct)+'%';
        });
        function stop(){dragging=false;}
        panel.addEventListener('pointerup',stop);
        panel.addEventListener('pointercancel',stop);
      })();