如何实现此自定义滑块颤动

<input type="range" id="customSlider" class="custom-slider">

.custom-slider {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

const slider = document.getElementById("customSlider");

slider.addEventListener("mousedown", () => {
  slider.classList.add("custom-slider-active");
});

slider.addEventListener("mouseup", () => {
  slider.classList.remove("custom-slider-active");
});