Timeline Slider

A plain range control over the timeline — a play/pause button, an <input type="range"> scrubbing 0–1 across the current window, and a text label for the scrubbed time. No day axis, no tick marks, no hover preview, no playback-speed menu; that fuller timeline now lives in OpenWeather's own weather-maps website repo. Both renderers wrap the same @openweather/maps-ui-core createTimelineModel, so window sizing, cursor math, and playback state can't drift between them.

DOM — createTimelineSlider

import { createTimelineSlider } from '@openweather/maps-ui';

const timelineSlider = createTimelineSlider({
  parent: document.body,
  timeline: controller.timeline,
});

timelineSlider.setLayer(controller.getLayerMetadata(activeCode));
// timelineSlider.destroy() on teardown

Option	Type	Notes
parent	HTMLElement	Mount point (required)
timeline	TimelineController	Typically controller.timeline

TimelineSliderHandle: setLayer(metadata) re-windows the range for a layer's past/future span + frame cadence; destroy() unmounts.

React — <TimelineSlider>

import { TimelineSlider } from '@openweather/maps-react/ui';

<TimelineSlider activeLayer={activeMetadata} />;

Prop	Type	Notes
activeLayer	LayerMetadata | undefined	Re-windows the range, same role as the DOM control's setLayer()
className?	string	Optional

Unlike the DOM control, <TimelineSlider> reads its TimelineController from React context (useTimelineModel(), via <MapsProviders> / <WeatherMap>) rather than taking it as a prop — mount it anywhere under a provider instead of wiring the controller through by hand. It doesn't have its model ready on the very first render, so it renders nothing until it is.

Both renderers share the range control's play/pause and cursor-fraction/label computation exactly — verified by the cross-renderer parity test.