Gradient Stop Editor

<div class="nuda-cpk2-gradient-stops">
  <div class="nuda-cpk2-gradient-stops__bar"
       style="background:linear-gradient(90deg,#62b6ff 0%,#9d6dff 45%,#ff6dd4 100%)">
    <span class="nuda-cpk2-gradient-stops__stop" role="slider" tabindex="0"
          aria-label="Stop 1" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
          aria-valuetext="Position 0%, blue"
          style="transform:translate(0px,-50%) rotate(45deg)"></span>
    <span class="nuda-cpk2-gradient-stops__stop is-active" role="slider" tabindex="0"
          aria-label="Stop 2" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45"
          aria-valuetext="Position 45%, purple"
          style="transform:translate(90px,-50%) rotate(45deg)"></span>
    <span class="nuda-cpk2-gradient-stops__stop" role="slider" tabindex="0"
          aria-label="Stop 3" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
          aria-valuetext="Position 100%, pink"
          style="transform:translate(196px,-50%) rotate(45deg)"></span>
  </div>
</div>

.nuda-cpk2-gradient-stops {
  padding: 16px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 240px;
}

.nuda-cpk2-gradient-stops__bar {
  position: relative;
  height: 16px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.nuda-cpk2-gradient-stops__stop {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: #fafafa;
  border: 2px solid #0c0c10;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: grab;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}

.nuda-cpk2-gradient-stops__stop:hover {
  transform: translate(0,-50%) rotate(45deg) scale(1.15) !important;
}

.nuda-cpk2-gradient-stops__stop.is-active {
  background: #e4ff54;
}

.nuda-cpk2-gradient-stops__stop:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cpk2-gradient-stops__stop {
    transition: none;
  }
}