use-track-events

import { useTrackEvents } from "@/hooks/limeplay/use-track-events"

function CustomSlider() {
  const trackEvents = useTrackEvents({
    orientation: "horizontal",
    onPointerDown: (progress, event) => {
      console.log("Clicked at:", progress) // 0-1
    },
    onPointerMove: (progress, isPointerDown, event) => {
      if (isPointerDown) {
        console.log("Dragging at:", progress)
      }
    },
  })

  return (
    <div
      className="relative h-2 w-full bg-gray-200"
      onPointerDown={trackEvents.onPointerDown}
      onPointerMove={trackEvents.onPointerMove}
      onPointerUp={trackEvents.onPointerUp}
      onPointerOut={trackEvents.onPointerOut}
    >
      <div className="absolute h-4 w-4 rounded-full bg-blue-500" />
    </div>
  )
}