---
title: "detectHorizontalDragGestures"
description: "Gesture detector that waits for pointer down and touch slop in the horizontal direction and then
calls [onHorizontalDrag] for each horizontal drag event. It follows the touch slop detection of
[awaitHorizontalTouchSlopOrCancellation], but will consume the position change automatically once
the touch slop has been crossed.

[onDragStart] called when the touch slop has been passed and includes an [Offset] representing
the last known pointer position relative to the containing element. The [Offset] can be outside
the actual bounds of the element itself meaning the numbers can be negative or larger than the
element bounds if the touch target is smaller than the
[ViewConfiguration.minimumTouchTargetSize].

[onDragEnd] is called after all pointers are up and [onDragCancel] is called if another gesture
has consumed pointer input, canceling this gesture.

This gesture detector will coordinate with [detectVerticalDragGestures] and
[awaitVerticalTouchSlopOrCancellation] to ensure only vertical or horizontal dragging is locked,
but not both.

Example Usage:"
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
suspend fun PointerInputScope.detectHorizontalDragGestures(
    onDragStart: (Offset) -> Unit = {},
    onDragEnd: () -> Unit = {},
    onDragCancel: () -> Unit = {},
    onHorizontalDrag: (change: PointerInputChange, dragAmount: Float) -> Unit,
)
```


Gesture detector that waits for pointer down and touch slop in the horizontal direction and then
calls `onHorizontalDrag` for each horizontal drag event. It follows the touch slop detection of
`awaitHorizontalTouchSlopOrCancellation`, but will consume the position change automatically once
the touch slop has been crossed.

`onDragStart` called when the touch slop has been passed and includes an `Offset` representing
the last known pointer position relative to the containing element. The `Offset` can be outside
the actual bounds of the element itself meaning the numbers can be negative or larger than the
element bounds if the touch target is smaller than the
`ViewConfiguration.minimumTouchTargetSize`.

`onDragEnd` is called after all pointers are up and `onDragCancel` is called if another gesture
has consumed pointer input, canceling this gesture.

This gesture detector will coordinate with `detectVerticalDragGestures` and
`awaitVerticalTouchSlopOrCancellation` to ensure only vertical or horizontal dragging is locked,
but not both.

Example Usage:



## Code Examples
### DetectHorizontalDragGesturesSample
```kotlin
@Composable
fun DetectHorizontalDragGesturesSample() {
    val offsetX = remember { mutableStateOf(0f) }
    val offsetY = remember { mutableStateOf(0f) }
    var width by remember { mutableStateOf(0f) }
    Box(Modifier.fillMaxSize().onSizeChanged { width = it.width.toFloat() }) {
        Box(
            Modifier.offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
                .fillMaxHeight()
                .width(50.dp)
                .background(Color.Blue)
                .pointerInput(Unit) {
                    detectHorizontalDragGestures { _, dragAmount ->
                        val originalX = offsetX.value
                        val newValue = (originalX + dragAmount).coerceIn(0f, width - 50.dp.toPx())
                        offsetX.value = newValue
                    }
                }
        )
    }
}
```