Canvas Timeline
Function

useTimelineViewportRangeControl

Adapts generic range scrollbar state to the current timeline viewport. The hook derives a controlled `{ start, end }` value from timeline `scrollLeft`, `zoomScale`, `viewportWidth`, and content duration. Thumb changes pan the engine, while handle changes update zoom and then restore the requested range start.

Signature

Type Definition
useTimelineViewportRangeControl(options: TimelineViewportRangeControlOptions = {}): UseTimelineViewportRangeControlResult

Parameters

NameTypeDescription
optionsTimelineViewportRangeControlOptionsTimeline viewport range options.

Returns

UseTimelineViewportRangeControlResult

Timeline viewport metrics plus `RangeScrollbar.Root` control props.

Examples

tsx Example
const viewportScrollbar = useTimelineViewportRangeControl();


return (
  <RangeScrollbar.Root {...viewportScrollbar.rootProps}>
    <RangeScrollbar.Thumb>
      <RangeScrollbar.Handle side="start" />
      <RangeScrollbar.Handle side="end" />
    </RangeScrollbar.Thumb>
  </RangeScrollbar.Root>
);