Liquid Dial Control | Learning Axis

HTML

CSS

const slider = document.getElementById('slider');
const knob = document.getElementById('knob');
let isDragging = false;
let currentX = 40;
let targetX = 40;
let vx = 0;

function updatePhysics() {
  let ax = (targetX - currentX) * 0.25;
  vx += ax;
  vx *= 0.75;
  currentX += vx;
  knob.style.left = `${currentX}px`;
  let stretch = 1 + Math.abs(vx) * 0.04;
  let squash = 1 - Math.abs(vx) * 0.02;
  knob.style.transform = `translateX(-50%) scale(${stretch}, ${squash})`;
  requestAnimationFrame(updatePhysics);
}

function handleMove(clientX) {
  const rect = slider.getBoundingClientRect();
  let relativeX = clientX - rect.left;
  targetX = Math.max(0, Math.min(relativeX, rect.width));
}
slider.addEventListener('mousedown', (e) => {
  isDragging = true;
  handleMove(e.clientX);
});
window.addEventListener('mousemove', (e) => {
  if (isDragging) handleMove(e.clientX);
});
window.addEventListener('mouseup', () => isDragging = false);
slider.addEventListener('touchstart', (e) => {
  isDragging = true;
  handleMove(e.touches[0].clientX);
}, {
  passive: true
});
window.addEventListener('touchmove', (e) => {
  if (isDragging) handleMove(e.touches[0].clientX);
}, {
  passive: true
});
window.addEventListener('touchend', () => isDragging = false);
updatePhysics();