5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T6fd,

Price history you can steer. A detail chart sits above a compressed mini map of the full 240 day series, and you drag a brush window across the bottom to choose what the top chart shows.

What it does

Brush window. Drag the middle of the window to pan through history. Pull either edge to widen or narrow it, and the detail chart rescales to whatever you selected.

Two linked charts. The mini map always shows the whole series with your selection highlighted, so you never lose your place while zoomed in.

Crosshair readout. Hover the detail plot and a dashed guide follows the cursor with a card showing price and date at that exact point.

Axis that follows the window. Ticks and end labels derive from the selection, taking the min and max of the visible range and padding 10% each side, so a flat stretch still fills the plot.

Optional chrome. Price axis and Crosshair each turn off on their own when you want the bare chart.

Best for

Analytics and reporting products, portfolio and performance pages, anywhere you need to show a long series without forcing the reader to squint at 240 points at once.

How to use

1. Drop it on the canvas. Give it real width, it wants room for both charts.

2. Set the Title, or clear it if the section already has a heading.

3. Set Window between 12 and 239 days for the starting selection. 72 is a quarter and reads well as a default.

4. Turn Price axis off for a cleaner look, or Crosshair off if the component is decorative rather than interactive.

5. Pick a Theme and Accent.

6. In preview, drag the brush and pull its edges to confirm the range feels right.

The 240 day series is deterministic sample data. Swap it for your feed in the code file.

5a:[["$","$L5d",null,{"post":{"id":"019fd24e-534a-735e-80ae-f42bdfc815f2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d6c45fdc-52a2-44b6-98bd-d9bc510c67c7","name":"Savva Sicevs","slug":"ssych","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d6c45fdc-52a2-44b6-98bd-d9bc510c67c7/dxqc635y","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yYoOJ4yeFQx3b2HmqiAj","resolved":true,"title":"Range Navigator","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Price history you can steer. A detail chart sits above a compressed mini map of the full 240 day series, and you drag a brush window across the bottom to choose what the top chart shows."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Brush window. Drag the middle of the window to pan through history. Pull either edge to widen or narrow it, and the detail chart rescales to whatever you selected."}]},{"type":"paragraph","content":[{"type":"text","text":"Two linked charts. The mini map always shows the whole series with your selection highlighted, so you never lose your place while zoomed in."}]},{"type":"paragraph","content":[{"type":"text","text":"Crosshair readout. Hover the detail plot and a dashed guide follows the cursor with a card showing price and date at that exact point."}]},{"type":"paragraph","content":[{"type":"text","text":"Axis that follows the window. Ticks and end labels derive from the selection, taking the min and max of the visible range and padding 10% each side, so a flat stretch still fills the plot."}]},{"type":"paragraph","content":[{"type":"text","text":"Optional chrome. Price axis and Crosshair each turn off on their own when you want the bare chart."}]},{"type":"paragraph","content":[{"type":"text","text":"Best for"}]},{"type":"paragraph","content":[{"type":"text","text":"Analytics and reporting products, portfolio and performance pages, anywhere you need to show a long series without forcing the reader to squint at 240 points at once."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Drop it on the canvas. Give it real width, it wants room for both charts."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Set the Title, or clear it if the section already has a heading."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Set Window between 12 and 239 days for the starting selection. 72 is a quarter and reads well as a default."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Turn Price axis off for a cleaner look, or Crosshair off if the component is decorative rather than interactive."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Pick a Theme and Accent."}]},{"type":"paragraph","content":[{"type":"text","text":"6. In preview, drag the brush and pull its edges to confirm the range feels right."}]},{"type":"paragraph","content":[{"type":"text","text":"The 240 day series is deterministic sample data. Swap it for your feed in the code file."}]}]},"introduction":"Price history with a brush window","slug":"range-navigator","author":{"framerUserId":"d6c45fdc-52a2-44b6-98bd-d9bc510c67c7","name":"Savva Sicevs","slug":"ssych","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d6c45fdc-52a2-44b6-98bd-d9bc510c67c7/dxqc635y","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d6c45fdc-52a2-44b6-98bd-d9bc510c67c7/019fd24e-3123-7747-b79f-2441ee547a67.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-05T14:22:55.794Z","updatedAt":"2026-08-24T22:21:47.183Z","publishedAt":"2026-08-05T14:22:55.790Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/RangeNavigator-vFORia.js@I2AhiETyPNagqMVZfUeg","previewUrl":"https://range-navigator.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"I2AhiETyPNagqMVZfUeg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-05T14:22:56.330Z","updatedAt":"2026-08-05T14:22:56.330Z","reported":false}}],"$L5f"]

Suggested for you