Brightness Slider

<div class="nuda-bslider">
  <svg class="nuda-bslider__icon nuda-bslider__icon--min" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="3" />
    <path d="M12 2v3M12 19v3M5 12H2M22 12h-3" />
  </svg>
  <div class="nuda-bslider__track">
    <div class="nuda-bslider__thumb" style="left:60%"></div>
  </div>
  <svg class="nuda-bslider__icon nuda-bslider__icon--max" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5" />
    <!-- Sun rays -->
  </svg>
</div>

.nuda-bslider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  width: 100%;
  max-width: 280px;
}

.nuda-bslider__icon {
  width: 14px;
  height: 14px;
  color: #a0a0a8;
  flex-shrink: 0;
  transition: color .25s,transform .25s;
}

.nuda-bslider:hover .nuda-bslider__icon--min {
  color: #63636e;
}

.nuda-bslider:hover .nuda-bslider__icon--max {
  color: #e4ff54;
  transform: rotate(20deg);
}

.nuda-bslider__track {
  flex: 1;
  position: relative;
  height: 4px;
  background: linear-gradient(90deg,#0c0c10,#e4ff54);
  border-radius: 99px;
  opacity: .4;
}

.nuda-bslider__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 99px;
  background: transparent;
}

.nuda-bslider__thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid #e4ff54;
  transform: translate(-50%,-50%);
  cursor: grab;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bslider:hover .nuda-bslider__icon--max {
    transform: none;
  }
}