Range Navigator, a dark React component
Savva Sicevs
A focus-plus-context price history, built for dark, data-dense product interfaces.
The detail chart sits above a compressed mini-map of the whole series. Drag the window to pan, pull an edge to zoom, and hover the plot for a dashed crosshair whose card reads that point's price and date. Axis ticks and end labels are derived from the current window, so the numbers always describe what you are actually looking at.
The design problem is the one every financial chart has: people need the shape of the whole series and the detail of one moment at the same time. Keeping both on screen, without a second view or a modal, is what the mini-map and the brush window are for.
Built in React and TypeScript with Tailwind and Motion. It ships as part of SSICEVS UI, my component library for dark, data-dense AI and fintech interfaces, and installs with one CLI command.
Live preview and the install command: https://www.ssicevs.com/library/range-navigator
Like this project
Posted Aug 3, 2026
A focus-plus-context price history: a detail chart over a compressed mini-map, with a draggable window that re-frames the plot and a crosshair that reads price and date at any point.
