Temperature

A thermostat slider whose track runs from cool blue to warm amber.

23°C

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 TemperatureSlider() {
    var value by remember { mutableStateOf(0.55f) }
    val track = Brush.horizontalGradient(
        listOf(Color(0xFF38BDF8), Color(0xFFA3E635), Color(0xFFF59E0B)),
    )
    Column {
        Text("${(16 + value * 14).roundToInt()}°C",
            style = MaterialTheme.typography.titleMedium)
        Box(Modifier.fillMaxWidth().padding(top = 8.dp)) {
            Box(Modifier.fillMaxWidth().height(6.dp)
                .clip(CircleShape).background(track))
            Slider(
                value = value,
                onValueChange = { value = it },
                colors = SliderDefaults.colors(
                    activeTrackColor = Color.Transparent,
                    inactiveTrackColor = Color.Transparent,
                ),
            )
        }
    }
}