Canvas Timeline
Function

useTimelineZoomControl

Adapts timeline zoom scale to a Base UI-compatible scalar slider. Use this hook when a product toolbar needs a focused, semantic zoom control rather than broad viewport commands from `useTimelineViewport`. The returned root props mutate `TimelineEngine.zoomScale`; thumb props provide the default label and formatted `aria-valuetext`.

Signature

Type Definition
useTimelineZoomControl(options: TimelineZoomControlOptions = {}): object

Parameters

NameTypeDescription
optionsTimelineZoomControlOptionsOptional zoom bounds, step size, label, and commit callback.

Returns

object

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

Return members

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

Examples

tsx Example
const zoom = useTimelineZoomControl({ min: 25, max: 400, step: 25 });


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