A slide to confirm control. The track fills as you drag, the handle turns into a check, and Enter or the arrow keys work too.
Fernhill Plants
Boston fern, clay pot, soil mix
$128.40
npx shadcn@latest add https://hyperblur.dev/r/pay-slide-to-pay.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-slide-to-pay.tsx.
import { PaySlideToPay } from "@/components/hyperblur/pay-slide-to-pay"
<PaySlideToPay label="Slide to pay" amount="$128.40" onConfirm={() => placeOrder()} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to pay" | Text on the track before confirming. |
| confirmLabel | string | "Payment sent" | Text on the track after confirming. |
| amount | string | Optional amount shown next to the label and read by screen readers. | |
| onConfirm | () => void | Called once when the handle passes the threshold or Enter is pressed. | |
| accent | string | "#2f7bff" | Track fill color while sliding. |
| threshold | number | 0.9 | Fraction of the track the handle must pass to confirm, from 0 to 1. |
| resetMs | number | 2600 | Milliseconds before the control resets after confirming. Use 0 to stay confirmed. |
| disabled | boolean | false | Dims the control and ignores input. |