Canvas Timeline
Function

useTimelinePanControl

Adapts horizontal timeline scroll to a Base UI-compatible scalar slider. Use this hook when an application wants a semantic pan control for `TimelineEngine.scrollLeft`. It overlaps with `useTimelineViewport` only at the engine command layer; this hook adds slider props, bounds, and formatted ARIA value text for custom UI primitives.

Signature

Type Definition
useTimelinePanControl(options: TimelinePanControlOptions = {}): object

Parameters

NameTypeDescription
optionsTimelinePanControlOptionsOptional scroll bounds, step size, label, and commit callback.

Returns

object

Current scroll offset, formatted value text, imperative setters, and props for `Slider.Root` plus `Slider.Thumb`.

Return members

NameSignatureDescription
commit(nextValue: number = control.value): voidSets horizontal scroll offset and settles the engine interaction.
getAriaValueText(value: number): stringFormats a scroll offset value for `aria-valuetext`.
labellabel: stringAccessible label used by the default thumb props.
maxmax: numberMaximum scroll offset in pixels.
minmin: numberMinimum scroll offset in pixels.
rootPropsrootProps: objectProps for a Base UI `Slider.Root`.
setValue(nextValue: number): voidSets horizontal scroll offset without an additional explicit commit callback.
stepstep: numberSlider step in pixels.
thumbPropsthumbProps: { aria-label: string; aria-valuetext: string }Props for a Base UI `Slider.Thumb`.
valuevalue: numberCurrent horizontal scroll offset in pixels.
valueTextvalueText: stringFormatted pan value for assistive technology.

Examples

tsx Example
const pan = useTimelinePanControl({ step: 40 });


return (
  <Slider.Root {...pan.rootProps}>
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb {...pan.thumbProps} />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);