---
title: "SwipeGestureHandler"
description: "SwipeGestureHandler element api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';

Use the `SwipeGestureHandler` to handle swipe gesture in some particular direction.
Recognition is limited to the element's geometry.

The `SwipeGestureHandler` recognizes touchscreen swipes and mouse drags.

```slint playground
export component Example inherits Window {
    width: 270px;
    height: 100px;

    property <int> current-page: 0;

    sgr := SwipeGestureHandler {
        handle-swipe-right: current-page > 0;
        handle-swipe-left: current-page < 5;
        swiped => {
            if self.current-position.x > self.pressed-position.x + self.width / 4 {
                current-page -= 1;
            } else if self.current-position.x < self.pressed-position.x - self.width / 4 {
                current-page += 1;
            }
        }

        HorizontalLayout {
            property <length> position: - current-page * root.width;
            animate position { duration: 200ms; easing: ease-in-out; }
            property <length> swipe-offset;
            x: position + swipe-offset;
            states [
                swiping when sgr.swiping : {
                    swipe-offset: sgr.current-position.x - sgr.pressed-position.x;
                    out { animate swipe-offset { duration: 200ms; easing: ease-in-out; }  }
                }
            ]

            Rectangle { width: root.width; background: green; }
            Rectangle { width: root.width; background: limegreen; }
            Rectangle { width: root.width; background: yellow; }
            Rectangle { width: root.width; background: orange; }
            Rectangle { width: root.width; background: red; }
            Rectangle { width: root.width; background: violet; }
        }
    }
}
```

Specify the different swipe directions you'd like to handle by setting the `handle-swipe-left/right/up/down` properties and react to the gesture in the `swiped` callback.

Pointer press events on the recognizer's area are forwarded to the children with a small delay.
If the pointer moves by more than 8 logical pixels in one of the enabled swipe directions, the gesture is recognized, and events are no longer forwarded to the children.

A quick click is a press and release within 100ms, without moving the pointer.
If no child handles a quick click, the click goes to the elements behind the `SwipeGestureHandler`, the same as with [Flickable](/master/docs/slint/reference/gestures/flickable.md).
If the pointer moves at all, even by one pixel, or the release comes after 100ms, the click isn't passed on.

To keep the gesture-recognition area large enough to feel responsive, wrap the `SwipeGestureHandler` around the controls it should
handle swipes for, rather than placing it as a sibling before them.

:::note{Known issue}
[#6781](https://github.com/slint-ui/slint/issues/6781): `SwipeGestureHandler` can interfere with other controls that also recognize swipe gestures, such as `Slider`.
Work around it by disabling the relevant `handle-swipe-*` properties while the child is being interacted with, for example in a
`Slider`'s `changed` and `released` callbacks.
:::

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
When disabled, the `SwipeGestureHandler` doesn't recognize any gestures.
</SlintProperty>

### pressed-position
<SlintProperty propName="pressed-position" typeName="struct" structName="Point" propertyVisibility="out">
The position of the pointer when the swipe started.
</SlintProperty>

### current-position
<SlintProperty propName="current-position" typeName="struct" structName="Point" propertyVisibility="out">
The current pointer position.
</SlintProperty>

### swiping
<SlintProperty propName="swiping" typeName="bool" propertyVisibility="out">
`true` while the gesture is recognized, false otherwise.
</SlintProperty>

### Handle swipe directions properties


### handle-swipe-left
<SlintProperty propName="handle-swipe-left" typeName="bool" defaultValue="false"/>

### handle-swipe-right
<SlintProperty propName="handle-swipe-right" typeName="bool" defaultValue="false"/>

### handle-swipe-up
<SlintProperty propName="handle-swipe-up" typeName="bool" defaultValue="false"/>

### handle-swipe-down
<SlintProperty propName="handle-swipe-down" typeName="bool" defaultValue="false"/>

## Callbacks

### moved()
Invoked when the pointer is moved.

### swiped()
Invoked after the swipe gesture was recognized and the pointer was released.

### cancelled()
Invoked when the swipe is cancelled programmatically or if the window loses focus.

## Functions

### cancel()
Cancel any on-going swipe gesture recognition.