Skip to content
Pinky UI

data

Timeline Scrubber

A native snapping range across labeled horizontal or vertical stops.

  • data
  • timeline
  • milestones
  • range

Live preview

Quick usage

usage
import { TimelineScrubber } from "@pinky-ui/systems";

<TimelineScrubber stops={milestones} onIndexChange={setMilestone} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
stopsTimelineStop[]—Ordered labeled and optionally described positions.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Native range supplies drag and keyboard without a gesture runtime.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Media, milestone and history selection

When not to use

  • Dozens of labels or non-positional lists

Skill

Purpose

TimelineScrubber selects labeled stops in media, history, milestones or analytics using a native snapping range. Use it when ordered position is meaningful.

Keep stops concise and ordered; avoid timelines with dozens of labels or unequal intervals presented as equal. Use buttons or a list when sequence position adds no value.

Arrow keys, click, drag and touch snap to the same controlled index, with textual current description. Vertical mode remains optional. Reduced motion changes state immediately and Timeline can drive Image Sequence or custom media without owning it.

Open this skill on its own page