Range Selection

In and out handles framing a timeline range on the same surface as a draggable playhead.

Installation

pnpm add @techsquidtv/canvas-timeline-react

npm install @techsquidtv/canvas-timeline-react

yarn add @techsquidtv/canvas-timeline-react

bun add @techsquidtv/canvas-timeline-react

1
Install the package.
The command above adds the React bindings and their package dependencies.
2
Import from the React entrypoint.
@techsquidtv/canvas-timeline-react
3
Add the timeline styles.
Use the full stylesheet with shadcn-compatible tokens, or base.css when your app owns the visual theme.
Default visuals
import '@techsquidtv/canvas-timeline-react/styles.css';
Base geometry
import '@techsquidtv/canvas-timeline-react/base.css';

import { Timeline } from '@techsquidtv/canvas-timeline-react';

export function RangeHandles() {
  return <Timeline.RangeSelector />;
}

Render these components inside a TimelineProvider so they can read the shared TimelineEngine.
Import @techsquidtv/canvas-timeline-react/styles.css when your app defines shadcn-compatible semantic tokens, or base.css when supplying your own theme.
CSS styles interaction layers; renderer theme styles canvas-painted timeline visuals.
Use the theming guide when CSS tokens should drive canvas-painted colors.
Requires react-dom alongside React because the headless slider interaction layer is provided by Base UI.
The default component keeps only the two thumbs pointer-active so clips, blank lanes, and playhead interactions can pass through.

Accessible, full-height timeline range selector built on @base-ui/react for loop, export, or selection boundaries.

Name	Reference	Description
`Timeline.RangeSelector`	Namespace export	Full-height timeline overlay for dragging In/Out boundaries with Base UI slider semantics.
`Timeline.RangeSelector.Root`	Namespace export	Provider-aware Base UI root for custom dual-thumb range controls.
`Timeline.RangeSelector.Control`	Namespace export	Wrapper around Slider.Control interaction zone.
`Timeline.RangeSelector.Track`	Namespace export	Wrapper around Slider.Track track boundary.
`Timeline.RangeSelector.Indicator`	Namespace export	Wrapper around Slider.Indicator representing active loop area.
`Timeline.RangeSelector.Thumb`	Namespace export	Interactive thumb for In or Out points (specifying index).

Name	Type	Description
`inPointChildren`	`ReactNode \| (props) => ReactNode`	Optional custom content for the In-point grabber, rendered inside the Base UI thumb.
`outPointChildren`	`ReactNode \| (props) => ReactNode`	Optional custom content for the Out-point grabber, rendered inside the Base UI thumb.
`snap`	`boolean`	Whether pointer-driven boundary edits should snap to timeline targets.