Slide confirm
A slide-to-confirm handle: drag it to the end, it spins while the action runs and unfurls into a done pill; Enter or Space confirms from the keyboard.
- enhancer
- button
- confirm
- drag
- payment
- loading
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Slide confirm example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<button type="button" data-motion="slide-confirm" data-motion-done="Sent">Slide to send</button>import { SlideConfirm } from "./motion/react/SlideConfirm";
<SlideConfirm>Your content</SlideConfirm><script setup lang="ts">
import SlideConfirm from "./motion/vue/SlideConfirm.vue";
</script>
<template>
<SlideConfirm>Your content</SlideConfirm>
</template>const el = document.querySelector("#title");
el.dataset.motion = "slide-confirm";The wrappers: SlideConfirm.tsx (React, TypeScript) and SlideConfirm.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-done | Done | the label once the action finished |
data-motion-wait | 1400 | how long the spinner shows when nobody answers the confirm event |
data-motion-reset | 4000 | when the done pill turns back into the slider; 0 keeps it |
Accessibility
- It stays a real button with its own text as its name. Enter or Space confirms at once: nobody has to drag. A tap without a drag only nudges the handle, so a stray touch never confirms. - While the action runs the button is aria-busy; when it ends a polite announcement says the done label, and the button reads as disabled until it resets. - The page runs the action from the confirm event; event.detail.until(promise) keeps the spinner up until the promise settles. - Reduced motion jumps the handle to the end and shows the done pill at once; the shine on the text stays still. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
slide-confirm.js is 1.8 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.