Timelinx

ZoomControls

Zoom slider and +/- buttons for timeline zoom

ZoomControls provides a zoom slider with increment/decrement buttons. It is fully controlled via ppf and onPpfChange.

Live Example

Loading...

Usage

import { ZoomControls } from '@timelinx/ui';
import { useState } from 'react';

function App() {
  const [ppf, setPpf] = useState(8);
  return <ZoomControls ppf={ppf} onPpfChange={setPpf} />;
}

Props

Prop

Type

Standalone Component

ZoomControls is a pure controlled component - it requires no providers or context. Pass the current zoom level and a setter, and it handles all interaction internally.

On this page