const container = document.querySelector('.compare-images')
const handle = document.querySelector('.slider-handle')
const beforeImg = document.querySelector('.before-img')

container.addEventListener('mousemove', (e) => {
  const rect = container.getBoundingClientRect()
  const offsetX = e.clientX - rect.left

  const clampedX = Math.max(0, Math.min(offsetX, rect.width))

  handle.style.left = `${clampedX}px`

  beforeImg.style.clipPath = `inset(0 0 0 ${clampedX}px)`
})