Slider Value Bubble

<div class="nuda-slbubble">
  <div class="nuda-slbubble__track">
    <div class="nuda-slbubble__fill" style="width:50%"></div>
    <div class="nuda-slbubble__thumb" style="left:50%">
      <span class="nuda-slbubble__bubble">42</span>
    </div>
  </div>
</div>

.nuda-slbubble {
  width: 100%;
  max-width: 220px;
  padding: 24px 12px 12px;
}

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

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

.nuda-slbubble__thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e4ff54;
  transform: translate(-50%,-50%);
  cursor: grab;
}

.nuda-slbubble__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #09090b;
  border: 1px solid #e4ff54;
  border-radius: 6px;
  color: #e4ff54;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: _bubFloat 2.4s ease-in-out infinite;
}

.nuda-slbubble__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #e4ff54;
}

@keyframes _bubFloat {
  0%,100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

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