use-track-events

Installation

npx shadcn add @limeplay/use-track-events

Example Usage

Use useTrackEvents to handle pointer interactions on slider components.

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

export function CustomSlider() {
  const trackEvents = useTrackEvents({
    orientation: "horizontal",
    onPointerDown: (progress, event) => {
      console.log("Pointer down at:", progress)
    },
    onPointerMove: (progress, isPointerDown, event) => {
      if (isPointerDown) {
        console.log("Dragging at:", progress)
      } else {
        console.log("Hovering at:", progress)
      }
    },
    onPointerUp: (event) => {
      console.log("Pointer up")
    },
  })

  return (
    <div
      {...trackEvents}
      className="h-2 w-full bg-gray-200 rounded"
    />
  )
}

Understanding

The use-track-events hook provides a standardized way to handle pointer events on slider/track components. It:

• Calculates progress (0-1) based on pointer position and orientation
• Handles pointer capture for smooth dragging
• Supports both horizontal and vertical orientations
• Provides separate handlers for down, move, up, and out events
• Automatically clamps progress values between 0 and 1

This hook is used internally by timeline-control and volume-control components for their slider interactions.

API Reference

useTrackEvents(props)

Returns event handlers for pointer interactions on track elements.

Parameters

Returns

Returns an object with event handlers that can be spread onto a track element: