Recipe

Time Range Picker

Accessible dual-thumb slider and preset-based time range selection patterns for dashboards, analytics filters, and scheduling interfaces.

Dual Thumb Slider

Filter by duration08:00 – 18:30

00:0006:0012:0018:0023:59

Preset Chips

Inline Date + Time

Start

Mar 14, 202608:00

End

Mar 14, 202618:30

Use native range inputs with CSS accent-color or a headless slider primitive. Presets reduce friction for common queries. Always pair with a clear visual indicator of the active range.