如何创建一个范围滑块与图像拇指动画到一个位置上的按钮点击在颤动？

<input type="range" id="slider" min="0" max="100" value="50">
<img id="thumb" src="thumb.png">
<button id="btn">点击</button>

#thumb {
  position: absolute;
  transition: transform 0.3s ease;
}

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

.shake {
  animation: shake 0.5s;
}

const slider = document.getElementById('slider');
const thumb = document.getElementById('thumb');
const btn = document.getElementById('btn');

slider.addEventListener('input', () => {
  const value = slider.value;
  const thumbPosition = value * 2; // 根据滑块的值计算图像的位置
  thumb.style.transform = `translateX(${thumbPosition}px)`;
});

btn.addEventListener('click', () => {
  btn.classList.add('shake'); // 添加颤动动画类
  setTimeout(() => {
    btn.classList.remove('shake'); // 移除颤动动画类
  }, 500);
});