KQ-699 · LOAN/SLIDER
Loan Slider
One slider for the amount and a row of chips for the term, with the cost of the answer printed live beneath them. The thumb tracks a drag with no lag and takes a click, a key or a term chip on snap; the monthly payment counts to its new value on glide through a motion value, and the cost rail — principal in cobalt, total interest in warn, scaled against the dearest loan on offer — grows on glide as the amount rises and lengthens its warn share as the term stretches. Arrows step the slider, Page keys move ten, Home and End reach the ends; the terms are a radio group with a roving tabindex.
Waylight Loans 12,500.00 · 36 mo | 402.75 / mo | interest 1,999.12
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/loan-slider
Props
- value / defaultValue
- number
- default min
- Controlled or initial loan amount.
- onValueChange
- (amount: number) => void
- default —
- Fires from the drag, click or key that moved the amount.
- min
- number
- default 1000
- Smallest amount on offer.
- max
- number
- default 25000
- Largest amount on offer; also scales the cost rail.
- step
- number
- default 250
- Amount per arrow key and drag snap; Page keys move ten.
- terms
- number[]
- default [12, 24, 36, 48, 60]
- Term chips, in months.
- term / defaultTerm
- number
- default the middle chip
- Controlled or initial term in months.
- onTermChange
- (months: number) => void
- default —
- Fires from the click or key that picked a term.
- apr
- number
- default —
- Annual rate in percent; drives the amortised payment.
- format
- (value: number) => string
- default Intl.NumberFormat, two decimals
- Formats every amount the control prints.
- label
- string
- default Loan amount
- Names the slider; printed above it.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | min | Controlled or initial loan amount. |
| onValueChange | (amount: number) => void | — | Fires from the drag, click or key that moved the amount. |
| min | number | 1000 | Smallest amount on offer. |
| max | number | 25000 | Largest amount on offer; also scales the cost rail. |
| step | number | 250 | Amount per arrow key and drag snap; Page keys move ten. |
| terms | number[] | [12, 24, 36, 48, 60] | Term chips, in months. |
| term / defaultTerm | number | the middle chip | Controlled or initial term in months. |
| onTermChange | (months: number) => void | — | Fires from the click or key that picked a term. |
| apr | number | — | Annual rate in percent; drives the amortised payment. |
| format | (value: number) => string | Intl.NumberFormat, two decimals | Formats every amount the control prints. |
| label | string | Loan amount | Names the slider; printed above it. |