Slidersanimated

Before / after

A draggable divider that wipes between a before and after image.

↔

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun CompareSlider() {
    var split by remember { mutableStateOf(0.5f) }
    BoxWithConstraints(
        Modifier.fillMaxWidth().height(120.dp)
            .clip(MaterialTheme.shapes.medium),
    ) {
        val w = constraints.maxWidth.toFloat()
        Box(Modifier.fillMaxSize().background(Color(0xFF334155)))
        Box(
            Modifier.fillMaxHeight()
                .width(with(LocalDensity.current) { (w * split).toDp() })
                .background(Color(0xFFF59E0B)),
        )
        Box(
            Modifier.fillMaxHeight().width(3.dp)
                .align(BiasAlignment(split * 2 - 1, 0f))
                .background(Color.White)
                .pointerInput(Unit) {
                    detectHorizontalDragGestures { change, _ ->
                        split = (change.position.x / w).coerceIn(0f, 1f)
                    }
                },
        )
    }
}