Here is a first version of a time interval input to allow the user to navigate in time back and forward, and zoom in and out. Can be used on observable framework. https://observablehq.com/@andreassolberg/custom-timepicker-interval-input Feel free to reuse code, or suggest improvements. https://youtube.com/shorts/HKaGE388iW8?feature=share

Nice work! To use in Framework, do you need to copy the code into a .js file, refactor little viewof pieces, and import? Or are there better pattern for this?

So far I have created two files:

timeinterval.js

and

timecontroller.js

. In timecontroller I need to add this on top:

import { TimeInterval } from "./timeinterval.js";
import * as htl from "npm:htl";

When I am using it in a markdown notebook, I use it like this.

# Timepicker

```js
import { timeController } from "./misc/timecontroller.js";

const selectedInterval = view(timeController());

js
display(selectedInterval);
```

Thanks for sharing, useful pattern to see