Canvas Timeline

React Registry

primitiveRange Scrollbar@techsquidtv/canvas-timeline-react/range-scrollbar

Range Scrollbar

A generic controlled range-window scrollbar primitive with an optional hook API.

Range scrollbar preview

A generic controlled range window with draggable thumb and resize handles.

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-react
  1. 1

    Install the package.

    The command above adds the React bindings and their package dependencies.

  2. 2

    Import from the React entrypoint.

    @techsquidtv/canvas-timeline-react/range-scrollbar
  3. 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';

Usage

ClipRangeScrollbar.tsx
import { useState } from 'react';
import { RangeScrollbar } from '@techsquidtv/canvas-timeline-react/range-scrollbar';


export function ClipRangeScrollbar() {
  const [value, setValue] = useState({ start: 10, end: 45 });


  return (
    <RangeScrollbar.Root
      min={0}
      max={100}
      value={value}
      minSpan={5}
      onValueChange={setValue}
    >
      <RangeScrollbar.Thumb>
        <RangeScrollbar.Handle side="start" />
        <RangeScrollbar.Handle side="end" />
      </RangeScrollbar.Thumb>
    </RangeScrollbar.Root>
  );
}

Notes

  • RangeScrollbar is controlled-only: keep the visible range in React state and update it from onValueChange.
  • The generic primitive uses caller-provided numeric units and has no TimelineEngine dependency.
  • Import @techsquidtv/canvas-timeline-react/styles.css when your app defines shadcn-compatible semantic tokens, or base.css when supplying your own theme.
  • useRangeScrollbar is a primitive hook imported from @techsquidtv/canvas-timeline-react/range-scrollbar, not from the timeline hooks subpath.

API Reference

Range Scrollbar

A generic controlled range-window scrollbar primitive with an optional hook API.

Exports

NameReferenceDescription
RangeScrollbar.RootAPI referenceControlled generic range scrollbar root.
RangeScrollbar.ThumbAPI referenceDraggable thumb representing the visible range window.
RangeScrollbar.HandleAPI referenceResize handle for the start or end of the visible range.
useRangeScrollbarAPI referencePrimitive hook for custom range scrollbar geometry and range updates from the range-scrollbar entrypoint.

Props and Inputs

NameTypeDescription
minnumberLower bound of the full scrollable domain.
maxnumberUpper bound of the full scrollable domain.
value{ start: number; end: number }Controlled visible range in caller-defined domain units.
minSpannumberSmallest allowed span between value.start and value.end.
onValueChange(value, details) => voidCallback used to store the next controlled range.
getAriaValueText(value, details) => stringOptional formatter for thumb and handle aria-valuetext output.
disabledbooleanDisables pointer and keyboard interactions while keeping parts rendered.
side'start' | 'end'Resize handle side for RangeScrollbar.Handle.