Curve Slider

<div class="nuda-curve">
  <svg viewBox="0 0 200 60" preserveAspectRatio="none">
    <path d="M0 50 Q50 50 100 30 T200 5"
          fill="none" stroke="rgba(255,255,255,.08)" stroke-width="2" />
    <path class="nuda-curve__draw" d="M0 50 Q50 50 100 30 T200 5"
          fill="none" stroke="#e4ff54" stroke-width="2"
          stroke-linecap="round" />
  </svg>
  <div class="nuda-curve__track">
    <div class="nuda-curve__thumb" style="left:55%"></div>
  </div>
  <div class="nuda-curve__labels">
    <span>Slow</span>
    <span>Fast</span>
  </div>
</div>

.nuda-curve {
  position: relative;
  width: 100%;
  max-width: 220px;
  padding: 8px 12px;
}

.nuda-curve svg {
  display: block;
  width: 100%;
  height: 50px;
}

.nuda-curve__draw {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: _curveDraw 1.6s cubic-bezier(.16,1,.3,1) forwards;
}

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

.nuda-curve__thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e4ff54;
  transform: translate(-50%,-50%);
  cursor: grab;
  box-shadow: 0 0 12px rgba(228,255,84,.5);
}

.nuda-curve__labels {
  display: flex;
  justify-content: space-between;
  color: #63636e;
  font-size: 10px;
  margin-top: 4px;
}

@keyframes _curveDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-curve__draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}