KQ-662 · SLIPPAGE/DIAL

Slippage Dial

Three tolerance stops and a custom field share one knob, which travels between them on snap with a single crisp overshoot rather than four chips blinking. The minimum received rolls its digits on snap as the tolerance changes, and a threshold note glides open to a ResizeObserver-measured height so no room is reserved for a state that is usually absent. The stops are a radio group with a roving tabindex — arrows step, Home and End reach the ends, Space selects — and the field is one Tab further on.

KQ-662 · SLIPPAGE/DIAL

Basinworks Exchange · 250 BSNQuoted 3,104.50 FRN

Minimum receivedFRN

Tolerance 0.50% — Min 3,088.98 FRN

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/slippage-dial

Props

expected: number; default —; The quoted receive figure, before any slippage is allowed for.
value / defaultValue: number; default 0.5; Controlled or initial tolerance, in percent.
onValueChange: (value: number) => void; default —; Fires from the press, key, or keystroke that changed the tolerance.
presets: number[]; default [0.1, 0.5, 1]; The stops, in percent, left to right.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Formats the quoted and minimum figures.
symbol: string; default FRN; Ticker printed after both figures.
warnAt: number; default 1; Tolerance above which the dial warns that the quote can slip.
lowAt: number; default 0.05; Tolerance below which the dial warns the trade may not settle.
max: number; default 50; Ceiling the custom field clamps to.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
expected	number	—	The quoted receive figure, before any slippage is allowed for.
value / defaultValue	number	0.5	Controlled or initial tolerance, in percent.
onValueChange	(value: number) => void	—	Fires from the press, key, or keystroke that changed the tolerance.
presets	number[]	[0.1, 0.5, 1]	The stops, in percent, left to right.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Formats the quoted and minimum figures.
symbol	string	FRN	Ticker printed after both figures.
warnAt	number	1	Tolerance above which the dial warns that the quote can slip.
lowAt	number	0.05	Tolerance below which the dial warns the trade may not settle.
max	number	50	Ceiling the custom field clamps to.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.