Range with Histogram

<div class="nuda-histrange">
  <div class="nuda-histrange__bars">
    <span class="nuda-histrange__bar" style="height:12%"></span>
    <!-- Repeat per bar, mark in-range bars with .in-range -->
  </div>
  <div class="nuda-histrange__track">
    <div class="nuda-histrange__fill" style="left:25%;width:45%"></div>
    <div class="nuda-histrange__thumb" style="left:25%"></div>
    <div class="nuda-histrange__thumb" style="left:70%"></div>
  </div>
</div>

.nuda-histrange {
  width: 100%;
  max-width: 240px;
  padding: 6px 12px;
}

.nuda-histrange__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-bottom: 6px;
}

.nuda-histrange__bar {
  flex: 1;
  background: rgba(255,255,255,.08);
  border-radius: 2px 2px 0 0;
  transition: background .35s,transform .25s;
  animation: _histBarIn .55s cubic-bezier(.16,1,.3,1) both;
}

.nuda-histrange__bar.in-range {
  background: #e4ff54;
}

.nuda-histrange__bars:hover .nuda-histrange__bar {
  transform: translateY(-1px);
}

.nuda-histrange__track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
}

.nuda-histrange__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #e4ff54;
  border-radius: 99px;
  transition: left .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1);
}

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

@keyframes _histBarIn {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-histrange__bar {
    animation: none;
  }
}