Composable Component

LevelIndicator

Creates a LevelIndicator for screens that that control a setting such as volume with either rotating side button, rotating bezel.

LevelIndicatorSample

@Composable
fun LevelIndicatorSample() {
    var value by remember { mutableFloatStateOf(0.5f) }
    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxSize(),
        ) {
            IconButton(
                modifier = Modifier.padding(horizontal = 16.dp),
                enabled = value < 1f,
                onClick = { value += 0.1f },
            ) {
                VolumeUpIcon(StepperDefaults.IconSize)
            }
            IconButton(
                modifier = Modifier.padding(horizontal = 16.dp),
                enabled = value > 0f,
                onClick = { value -= 0.1f },
            ) {
                VolumeDownIcon(StepperDefaults.IconSize)
            }
        }
        LevelIndicator(value = { value }, modifier = Modifier.align(Alignment.CenterStart))
    }
}