SwipeController

Reports a left, right, up or down swipe on release.

Reach for it for a carousel or pager.

Import

import { SwipeController, createSwipeController } from '@ecopages/radiant-ui/controllers';

Try it

Press on the box and either move at least 48 px sideways or flick it at least 16 px faster than 0.5 px per ms, then release. A drag that is not at least twice as far sideways as it is up or down is ignored. The callback reports the direction.

<div data-example="swipe">
	<div data-box>Swipe me</div>
	<p data-status>No swipe yet</p>
</div>

import { SwipeController } from '@ecopages/radiant-ui/controllers';
 
export function mount(root: HTMLElement): () => void {
	const box = root.querySelector<HTMLElement>('[data-box]')!;
	const status = root.querySelector('[data-status]')!;
 
	const swipe = new SwipeController({
		getTarget: () => box,
		minVelocity: 0.5,
		dominance: 2,
		onSwipe: (direction) => (status.textContent = `Swiped ${direction}`),
	});
	swipe.attach();
	return () => swipe.destroy();
}

mount runs once for each example element on the page, and the function it returns undoes it; see how the examples run.

Config

Lifecycle

attach() listens for a press on the target; release and cancel are then listened for on document, so a release outside the element still ends the gesture. It reports once, on release, and does not follow the pointer; a surface that moves with the pointer needs PointerDragController. A cancel or destroy() drops a gesture in progress, and destroy() removes the listeners.

With a host, createSwipeController(host, config) does the same on connect and disconnect; see bindController.

Protected hooks

Extend the class and override these to change how it decides. A component never extends a controller; a subclass is registered with bindController.