Skip to main content

TimelineWidget (Experimental)

from v9.2

This widget provides a time slider with play/pause controls. Configure a time range, step interval, and play speed to animate data over time.

Usage

import {Deck} from '@deck.gl/core';
import {_TimelineWidget as TimelineWidget} from '@deck.gl/widgets';

new Deck({
widgets: [
new TimelineWidget({
timeRange: [0, 24],
step: 1,
playInterval: 500
})
]
});

TimelineProps

The TimelineWidget accepts the generic WidgetProps and:

timeRange ([number, number], optional)

  • Default: [0, 100]

Minimum and maximum values for the time slider.

step (number, optional)

  • Default: 1

Increment step for the slider and play animation.

initialTime (number, optional)

  • Default: timeRange[0]

Starting value of the slider.

onTimeChange (Function, optional)

(value: number) => void
  • Default: () => {}

Callback invoked when the time value changes (drag or play).

playInterval (number, optional)

  • Default: 1000

Interval in milliseconds between automatic time increments when playing.

Source

modules/widgets/src/timeline-widget.tsx