useTimelineInOutRangeControl API

Signature

useTimelineInOutRangeControl(options: TimelineInOutRangeControlOptions = {}): object

Parameters

Name	Type	Description
options	TimelineInOutRangeControlOptions	Optional bounds, step size, thumb labels, and commit callback.

Returns

object

Current In/Out values in seconds, formatted range text, engine commands, and props for range slider root and thumbs.

Return members

Name	Signature	Description
`clear`	`(): void`	Clears both In and Out points.
`commit`	`(nextValue: [number, number] = control.value): void`	Updates In/Out points and settles the engine interaction.
`getAriaValueText`	`(nextValue: number): string`	Formats a timeline second value for `aria-valuetext`.
`inThumbProps`	`inThumbProps: { aria-label: string; aria-valuetext: string }`	Props for the Base UI thumb controlling the In point.
`inValueText`	`inValueText: string`	Formatted in-point value for assistive technology.
`max`	`max: number`	Maximum timeline boundary time in seconds.
`min`	`min: number`	Minimum timeline boundary time in seconds.
`outThumbProps`	`outThumbProps: { aria-label: string; aria-valuetext: string }`	Props for the Base UI thumb controlling the Out point.
`outValueText`	`outValueText: string`	Formatted out-point value for assistive technology.
`rootProps`	`rootProps: object`	Props for a Base UI `Slider.Root`.
`setValue`	`(nextValue: number[], eventDetails?: RangeChangeDetails): void`	Updates In/Out points from second values without settling history.
`step`	`step: number`	Slider step in seconds.
`value`	`value: [number, number]`	Current `[inPoint, outPoint]` values in seconds.
`valueText`	`valueText: string`	Formatted range summary for assistive technology.

Examples

const range = useTimelineInOutRangeControl();

return (
  <Slider.Root {...range.rootProps}>
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb index={0} {...range.inThumbProps} />
        <Slider.Thumb index={1} {...range.outThumbProps} />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);