Slidersanimated

Rotary dial

A draggable circular dial that fills an arc as the value turns.

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 RotaryDial() {
    var angle by remember { mutableStateOf(220f) }
    val accent = Color(0xFF8B5CF6)
    Box(
        Modifier.size(120.dp).pointerInput(Unit) {
            detectDragGestures { change, _ ->
                val center = Offset(size.width / 2f, size.height / 2f)
                val a = atan2(change.position.y - center.y,
                    change.position.x - center.x)
                angle = ((Math.toDegrees(a.toDouble()) + 90 + 360) % 360).toFloat()
            }
        },
        contentAlignment = Alignment.Center,
    ) {
        Canvas(Modifier.fillMaxSize()) {
            val stroke = 10.dp.toPx()
            drawArc(Color.LightGray.copy(alpha = 0.3f), 130f, 280f, false,
                style = Stroke(stroke, cap = StrokeCap.Round))
            drawArc(accent, 130f, 280f * (angle / 360f), false,
                style = Stroke(stroke, cap = StrokeCap.Round))
        }
        Text("${(angle / 360f * 100).roundToInt()}",
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold)
    }
}