Components
Range Navigator
Focus + context price history: a detail chart sits over a compressed mini-map of the whole series. Drag the brush 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. Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import { Demo } from "@/components/ui/range-navigator"
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="w-full">
<Demo />
</div>
)
}
Dependencies
Published
Similar components
Explore more
Part of ssicevs — browse the full library on 21st.dev.