Swipe to action component

double_chevron_right.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="12" android:viewportWidth="12" android:width="24dp">
      
    <path android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M0.293,9.293L3.586,6L0.293,2.707C-0.098,2.317 -0.098,1.683 0.293,1.293C0.683,0.902 1.317,0.902 1.707,1.293L5.707,5.293C6.098,5.683 6.098,6.317 5.707,6.707L1.707,10.707C1.317,11.098 0.683,11.098 0.293,10.707C-0.098,10.317 -0.098,9.683 0.293,9.293zM6.293,9.293L9.586,6L6.293,2.707C5.902,2.317 5.902,1.683 6.293,1.293C6.683,0.902 7.317,0.902 7.707,1.293L11.707,5.293C12.098,5.683 12.098,6.317 11.707,6.707L7.707,10.707C7.317,11.098 6.683,11.098 6.293,10.707C5.902,10.317 5.902,9.683 6.293,9.293z"/>
    
</vector>

SwipeAction.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SwipeToDelete(
    onDelete: () -> Unit
) {
    var value by remember { mutableFloatStateOf(0f) }
    val source = remember { MutableInteractionSource() }
    val scale = remember { 12f }
    val height = remember { (4 * scale).dp }
    var initialDragValue: Float? by remember { mutableStateOf(null) } //To prevent accidental deletes and make sure the user actually swipes


    Box(
        contentAlignment = Alignment.Center, modifier = Modifier
            .fillMaxWidth()
            .height(height)
            .clip(CircleShape)
            .border(1.dp, MaterialTheme.colorScheme.error, CircleShape)
    ) {
        Text(text = "Swipe to delete", color = MaterialTheme.colorScheme.error)

        Box(contentAlignment = Alignment.CenterStart) {

            Box(
                Modifier
                    .size(height)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.error)
            )

            Slider(
                value = value,
                onValueChange = {
                    if (initialDragValue == null) {
                        initialDragValue = it
                    }

                    value = it
                },
                onValueChangeFinished = {
                    initialDragValue?.let { initialDragValue ->
                        if (initialDragValue < 50f && value == 100f) {
                            onDelete()
                        }
                    }

                    value = 0f
                    initialDragValue = null
                },
                steps = 100,
                valueRange = 0f..100f,
                interactionSource = source,
                track = { sliderState ->
                    SliderDefaults.Track(
                        colors = SliderDefaults.colors(
                            activeTickColor = Color.Transparent,
                            inactiveTickColor = Color.Transparent,
                            activeTrackColor = MaterialTheme.colorScheme.error,
                            inactiveTrackColor = Color.Transparent
                        ),
                        enabled = true,
                        sliderState = sliderState,
                        modifier = Modifier
                            .scale(scaleX = 1f, scaleY = scale)
                    )
                },
                thumb = {
                    Box(
                        Modifier
                            .size(height)
                            .clip(CircleShape)
                            .background(MaterialTheme.colorScheme.error),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            modifier = Modifier.size(14.dp),
                            painter = painterResource(id = R.drawable.double_chevron_right),
                            contentDescription = "swipe right icon",
                            tint = MaterialTheme.colorScheme.onError
                        )
                    }
                }
            )
        }
    }
}