Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTyped start and end date-times for zooming a chart, clamped to the data domain, with a minimum span and a reset button. Use this when a time-series chart needs precise zoom bounds beside the brush.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a time-series chart needs precise zoom bounds beside the brush.
Do not use it as the main date filter of a report; use date-range-filter-popover.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
| domain | { from: string; to: string } | - | Full extent of the data (local date-times). |
| value / defaultValue | { from: string; to: string } | domain | Current zoom. |
| onValueChange | (zoom: { from; to }) => void | - | A clamped valid zoom. |
| minSpanMinutes | number | 5 | Smallest zoom. |
The pattern ships with a Testing Library test (chart-zoom-range-inputs.test.tsx) that covers clamping to the domain, the minimum span, reset and the announcement.