Range Bubble

<!-- Range Bubble — set --v as a percentage (or px) for thumb position -->
<div class="nuda-range" style="--v: 65%">
  <div class="nuda-range__track"><span class="nuda-range__fill"></span></div>
  <span class="nuda-range__thumb">
    <span class="nuda-range__bubble">65</span>
  </span>
</div>

/* Range Bubble
   Custom slider visual: filled track, thumb, value bubble with pointer.
   Customize: --rng-color, --rng-thumb (set --v to drive the position). */

.nuda-range {
  --rng-color: #e4ff54;
  --rng-thumb: #fafafa;
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 36px;
  padding: 16px 10px;
}

.nuda-range__track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  transform: translateY(-50%);
}

.nuda-range__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--v, 0%);
  background: linear-gradient(90deg, rgba(228, 255, 84, 0.6), var(--rng-color));
  border-radius: 2px;
  animation: nuda-rng-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nuda-range__thumb {
  position: absolute;
  left: var(--v, 0%);
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rng-thumb);
  border: 2px solid var(--rng-color);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.4);
  animation: nuda-rng-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.nuda-range__bubble {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: var(--rng-color);
  color: #09090b;
  font: 700 0.625rem ui-sans-serif, system-ui, sans-serif;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  animation: nuda-rng-bub 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.nuda-range__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--rng-color);
}

@keyframes nuda-rng-fill { from { width: 0; } }
@keyframes nuda-rng-pop  { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes nuda-rng-bub  { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }