---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: SwipeGestureHandler
description: SwipeGestureHandler element api.
---
import SlintProperty  from '/src/components/SlintProperty.astro';

```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; }
        }
    }
}
```

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

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.

## 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.
