ns-ui
Two-way allocation slider built as a slack wire between two labeled anchors: a bead sliding along the wire sets the ratio while the wire's own sag encodes the unallocated remainder, so a taut straight wire means fully committed and a deep droop means budget left on the table.
Use when an allocation control where BOTH a ratio and a total-committed amount matter at once — budget splits, traffic weighting, quota assignment — and the wire's own sag is the second variable's readout, not just a ratio rail. Reach for slider-loupe instead for a single precise value read through a magnifying lens (audio scrub, zoom level), and pricing-scale for a literal two-option weighing/comparison rather than a continuous split-plus-commitment.
Install
npx shadcn add https://design.helpmarq.comns-ui / slider-allocation-wire — the wire is the readout
Drag the bead to shift the split. Scroll or drag the total track to winch how much of the budget is actually committed.
Fully committed by default — the wire snaps taut with a decaying twang the moment total allocation lands at 100%.
| Prop | Type | Default | Description |
|---|---|---|---|
| leftLabel? | string | — | label for the left anchor, e.g. "Compute" |
| rightLabel? | string | — | label for the right anchor, e.g. "Storage" |
| ratio? | number | — | controlled split ratio, 0-100 (% of the committed total given to left) |
| defaultRatio? | number | — | — |
| total? | number | — | controlled total committed, 0-100 (% of budget not left on the table) |
| defaultTotal? | number | — | — |
| onRatioChange? | (v: number) => void | — | — |
| onTotalChange? | (v: number) => void | — | — |
| className? | string | — | — |