useTimelinePlayheadControl API

Signature

useTimelinePlayheadControl(options: TimelinePlayheadControlOptions = {}): object

Parameters

Name	Type	Description
options	TimelinePlayheadControlOptions	Optional bounds, step size, label, and commit callback for the playhead control.

Returns

object

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

Return members

Name	Signature	Description
`commit`	`(nextValue: number = control.value): void`	Moves the playhead and settles the engine interaction.
`getAriaValueText`	`(value: number): string`	Formats a timeline second value for `aria-valuetext`.
`label`	`label: string`	Accessible label used by the default thumb props.
`max`	`max: number`	Maximum playhead time in seconds.
`min`	`min: number`	Minimum playhead time in seconds.
`rootProps`	`rootProps: object`	Props for a Base UI `Slider.Root`.
`setValue`	`(nextValue: number): void`	Moves the playhead to an absolute time in seconds without settling history.
`step`	`step: number`	Slider step in seconds.
`stepBy`	`(deltaSeconds: number): void`	Moves the playhead by a relative number of seconds.
`thumbProps`	`thumbProps: { aria-label: string; aria-valuetext: string }`	Props for a Base UI `Slider.Thumb`.
`value`	`value: number`	Current playhead time in seconds.
`valueText`	`valueText: string`	Formatted playhead value for assistive technology.

Examples

const playhead = useTimelinePlayheadControl();

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