#195
Progress ring
A ring gauge controlled by a slider, starting at 65.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Progress ring" pattern (@codeatlasdev/ui demo #195, charts/gauge) in my app.
Call get_demo({ ids: ["#195"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Letting users tune a percentage or score and see the gauge respond live.
Keep these library parts, with the props and tokens the demo uses:
- Card, Stack, Slider from "@codeatlasdev/ui"
- GaugeChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `let value = $state(65)` shared by gauge and slider
- `<GaugeChart {value} variant="ring" height="260px" />`
- `<Slider bind:value min={0} max={100} step={1} />`
- `<Stack gap="5">` stacks gauge and slider inside `<Card full>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Slider
@codeatlasdev/ui - GaugeChart
@codeatlasdev/ui/charts
How it is built
- `let value = $state(65)` shared by gauge and slider
- `<GaugeChart {value} variant="ring" height="260px" />`
- `<Slider bind:value min={0} max={100} step={1} />`
- `<Stack gap="5">` stacks gauge and slider inside `<Card full>`
Related
Loading source.