Stat range slider
componentA dual-thumb min/max range slider with optional tier ticks — the stat filter for a build optimizer ("Resilience ≥ 60", "Mobility 30–70").
Install
npx shadcn@latest add @engram/stat-range-sliderRegistry item: /r/stat-range-slider.json — the machine-readable definition agents install from.
Example
Resilience60–100
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Track minimum. Default 0. |
max | number | 100 | Track maximum. Default 100. |
value* | [number, number] | — | The selected [low, high] bounds. |
step | number | 1 | Step between values. Default 1. |
tiers | number | — | Tier breakpoint spacing — draws ticks every `tiers` units (e.g. 10). |
onChange | (value: [number, number]) => void | — | — |
label | ReactNode | — | Row label shown above the track. |
className | string | — | — |
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.