Slidersanimated

Label bubble

A value slider with a label bubble that tracks the thumb.

40%

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 BubbleSlider() {
    var value by remember { mutableStateOf(0.4f) }
    Column {
        Box(Modifier.fillMaxWidth()) {
            val pct = (value * 100).roundToInt()
            Surface(
                color = MaterialTheme.colorScheme.primary,
                contentColor = MaterialTheme.colorScheme.onPrimary,
                shape = MaterialTheme.shapes.small,
                modifier = Modifier
                    .align(BiasAlignment(value * 2 - 1, 0f))
                    .padding(bottom = 4.dp),
            ) {
                Text(
                    "$pct%",
                    Modifier.padding(horizontal = 8.dp, vertical = 2.dp),
                    style = MaterialTheme.typography.labelMedium,
                )
            }
        }
        Slider(value = value, onValueChange = { value = it })
    }
}