Glow Fill Knob
Turn a dark glass dial and watch a radial glow fill it from the bottom rim while the number counts each level.
- Dependencies
- No extra packages
- Size
- 423 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/glow-fill-knob.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/glow-fill-knob.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the glow-fill-knob.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "heat level" | Curved text over the numeral and the slider's accessible name. |
| value | number | 3 | Starting level, clamped to 0–max. The dial sweeps up to it from empty on first view. |
| max | number | 9 | Number of levels; the sphere is completely filled at max. One mark is drawn per level. |
| palette | "ember" | "solar" | "aurora" | "plasma" | "glacier" | "custom" | "ember" | Glow colours. Ember is yellow / orange / red; custom uses core, mid and edge. |
| core / mid / edge | string | "#ffd84a" / "#ff6a00" / "#d01c00" | The three stops of the radial fill, from the bottom rim outward (custom palette). |
| duration | number | 2200 | Intro sweep in ms (ease-in-out). |
| size | number | 440 | Maximum diameter in px; every part is sized in container units. |
| onChange | (level: number) => void | — | Called with the committed level after a drag or key press. |