KQ-500 · SLIDE/CONFIRM
Slide Confirm
A track that asks for the whole gesture. The thumb tracks the pointer 1:1 while the label fades under it and a fill follows behind; past 85% it slams home on flick, the arrow morphs into a check and the copy swaps, and released short of that it springs back on snap. ArrowRight nudges 10% a press, ArrowLeft takes it back, End runs it to the top and Enter there confirms, so the keyboard drives the same physics.
KQ-500 · SLIDE/CONFIRM
Coldbrook order 447148.00
Slide to pay 48.00
Arrow keys nudge the thumb ten percent; Enter at the end confirms.Coldbrook checkout idle
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/slide-confirm
Props
- onConfirm
- () => void
- default —
- Fires once when the slide completes.
- label
- string
- default "Slide to confirm"
- Track copy while idle; it also names the slider.
- confirmedLabel
- string
- default "Confirmed"
- Copy after confirming.
- resetAfter
- number
- default —
- Milliseconds before the thumb returns; omit to stay confirmed.
- disabled
- boolean
- default false
- Locks the track and takes the thumb out of the tab order.
- onProgressChange
- (percent: number) => void
- default —
- Fires with the whole-percent position on every change, spring-back included.
| Prop | Type | Default | Description |
|---|---|---|---|
| onConfirm | () => void | — | Fires once when the slide completes. |
| label | string | "Slide to confirm" | Track copy while idle; it also names the slider. |
| confirmedLabel | string | "Confirmed" | Copy after confirming. |
| resetAfter | number | — | Milliseconds before the thumb returns; omit to stay confirmed. |
| disabled | boolean | false | Locks the track and takes the thumb out of the tab order. |
| onProgressChange | (percent: number) => void | — | Fires with the whole-percent position on every change, spring-back included. |