Examples

Date Bounds

Keep the visible timeline inside an allowed date range.

Constrain either or both viewport edges

bounds.minDate bounds.maxDate bounds.overflow

minDate limits the left edge of the visible viewport and maxDate limits its right edge. Set either value to null when that side should remain unbounded.

Choose a setup below, then drag or zoom the timeline. The jump buttons deliberately request dates outside the configured range so you can see which edge stops the viewport.

To fit or jump to dates without defining limits, see the Timeline Navigation example.

Earliest edge: 1950 visible viewport Latest edge: 2010

Try the active bounds

Both viewport edges are bounded. Drag the timeline towards either end.

Elastic versus clamp only changes active interaction. Programmatic navigation always finishes inside the bounds. With elastic, dragging can temporarily pull past an edge before settling back; clamp stops at the edge immediately.