md`# Timeline controls We present a collection of zoomable timeline inputs that can be used to control and visualize a video, an animation or other temporal data. ![Timelines](${await FileAttachment("timelines@1.png").url()}) Mouse-scroll when hovering the timelines to zoom in or out, and click to select the time (and update the control's value). They can be imported from this notebook: ~~~js import {ruler, springRuler, thumbnails, buttons, intervals, points, stack} from '@severo/timeline' ~~~ See the details of every control: - [ruler](https://observablehq.com/@severo/ruler-timeline) - [springRuler](https://observablehq.com/@severo/spring-ruler-timeline) - [thumbnails](https://observablehq.com/@severo/thumbnails-timeline) - [buttons](https://observablehq.com/@severo/buttons-timeline) - [intervals](https://observablehq.com/@severo/intervals-timeline) - [points](https://observablehq.com/@severo/points-timeline) - [stack](https://observablehq.com/@severo/stack-timeline) For example, they can be used to navigate to a particular frame in a video: - [Video Time Zoom](https://observablehq.com/@severo/video-time-zoom) --- The zoomable timeline specification defines a common API for zoomable horizontal timeline components. Any zoomable timeline component is an Observable input, compatible with viewof. This specification and the common functions provided in this notebook make it easier to combine various timelines in the [stack timeline](https://observablehq.com/d/505ccf83529f32b3) for example. A control that implements the timeline specification MUST: - *define the control width*, providing a \`width\` constructor option. - *provide zoom and pan interactions*. The current zoom is defined by the \`zoomRange\` property (a two values array [t0, t1]). The \`zoomRange\` property can be set using the constructor option and the setter. A \`zoomed\` event is dispatched on every zoom or pan interaction. The zoom linearly maps \`zoomRange\` to the full width of the control, from left (\`t0\`) to right (\`t1\`). - *allow to select a specific value*. The current value is available as the \`value\` property. The \`value\` property can be set using the constructor option and the setter. An \`input\` event is dispatched whenever the value is changed using the input. ### Constructor options

\`value\`: the current value. Defaults to 0
\`min\`: the minimum value. Defaults to -Infinity
\`max\`: the maximum value. Defaults to +Infinity
\`step\`: the number that specifies the granularity that the value must adhere to. It follows the same logic as the [\`\`'s \`step\` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step). Defaults to 'any'
\`width\`: the control width in pixels. Defaults to Observable's \`width\`
\`zoomRange\`: the zoom range. The \`zoomRange\` property keeps no relation with the \`value\` property, in particular \`value\` is not required to lie inside the zoom range. Defaults to [0, 1]
\`zoomTranslateExtent\`: the extent of zoom range [minZoomRangeStart, maxZoomRangeEnd]. The zoom range start cannot be least than minZoomRangeStart, and the zoom range end cannot be greater than maxZoomRangeEnd. The name and behavior are similar to d3-zoom [.translateExtent()](https://github.com/d3/d3-zoom/#zoom_translateExtent). Defaults to [-Infinity, +Infinity]
\`zoomScaleExtent\`: the extent of zoom scale [minZoomScale, maxZoomScale]. The zoom scale is expressed in pixels per unit of value. Set minZoomScale to \`width / (zoomRange[1]-zoomRange[0])\` in order to forbid zoom out from the initial scale for example. Note that it is relative to \`width\`. The values will typically be 100 or more. The name and behavior are similar to d3-zoom [.zoomScaleExtent()](https://github.com/d3/d3-zoom/#zoom_scaleExtent). Defaults to [0, +Infinity]
\`zoomDisabled\`: disables the zoom interactions. Note that the \`zoomRange\` setter and getter still work. Defaults to false

### Getters and setters \`value\` and \`zoomRange\` can be get and set. Note that it's possible to set a \`value\` that does not respect \`min\`, \`max\` or \`step\` options, and a \`zoomRange\` that does not respect \`zoomRangeExtent\`, similarly to what occurs with the \`\` element. ### Events

\`input\`: The \`input\` event is dispatched whenever \`value\` is changed using the control's interactions (click).
\`zoomed\`: The \`zoomed\` event is dispatched whenever \`zoomRange\` is changed using the control's interactions (pan, zoom).

Note that events are not dispatched when the properties are modified using the setters. --- Note that zoomable timeline controls MIGHT also provide: - specific options, getters and setters - a \`height\` option - \`precision\`, and maybe other [slider input](https://observablehq.com/@jashkenas/inputs#sliderDemo) options - keyboard interaction - touch interaction - hover interaction - a graphical representation of the current time when it lies outside of the time range ("go to current time" link, for example) - apply the \`:invalid\` pseudo-class if the value is invalid regarding min, max and step. `