A stepped horizontal slider with tick marks, a diamond thumb, a 03 / 09 counter and the name of the current step.
npx shadcn@latest add https://hyperblur.dev/r/hud-shelf-slider.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-shelf-slider.tsx.
import { HudShelfSlider } from "@/components/hyperblur/hud-shelf-slider"
<HudShelfSlider count={9} labels={["Ion Drift", "Night Grid"]} onChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 9 | Number of steps. |
| value | number | Controlled step, zero based. Pair with onChange. | |
| defaultValue | number | 2 | Initial step when uncontrolled, zero based. |
| onChange | (index: number) => void | Called with the new zero based step on drag, click and keyboard. | |
| label | string | "Shelf" | Micro label and accessible name of the slider. |
| labels | string[] | Name of each step, shown next to the label and read by screen readers. | |
| accent | string | "#ff4d4d" | Thumb, fill and counter color. |