Price Range

<div class="nuda-pricerange">
  <div class="nuda-pricerange__head">
    <span>$24</span>
    <span>—</span>
    <span>$148</span>
  </div>
  <div class="nuda-pricerange__track">
    <div class="nuda-pricerange__fill" style="left:16%;width:59%"></div>
    <div class="nuda-pricerange__thumb" style="left:16%"></div>
    <div class="nuda-pricerange__thumb" style="left:75%"></div>
  </div>
  <div class="nuda-pricerange__minmax">
    <span>$0</span>
    <span>$200</span>
  </div>
</div>

.nuda-pricerange {
  padding: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 260px;
}

.nuda-pricerange__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #e4ff54;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nuda-pricerange__head span:nth-child(2) {
  color: #63636e;
}

.nuda-pricerange__track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  margin-bottom: 6px;
}

.nuda-pricerange__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-pricerange__thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid #e4ff54;
  transform: translate(-50%,-50%);
  cursor: grab;
}

.nuda-pricerange__minmax {
  display: flex;
  justify-content: space-between;
  color: #63636e;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}