# Stepper ## Functions summary |---|---| | `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, valueProgression: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-progression/index.html, decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` allows users to make a selection from a range of values. | | `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, steps: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` allows users to make a selection from a range of values. | ## Functions ### Stepper Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Stepper.kt+function:Stepper) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0) ``` @Composable fun Stepper(     value: Int,     onValueChange: (Int) -> Unit,     valueProgression: IntProgression,     decreaseIcon: @Composable () -> Unit,     increaseIcon: @Composable () -> Unit,     modifier: Modifier = Modifier,     enabled: Boolean = true,     colors: StepperColors = StepperDefaults.colors(),     content: @Composable BoxScope.() -> Unit ): Unit ``` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` allows users to make a selection from a range of values. It's a full-screen control with increase button on the top, decrease button on the bottom and a slot (expected to have either `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`) in the middle. Value can be increased and decreased by clicking on the increase and decrease buttons. Buttons can have custom icons - `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`. Stepper itself doesn't show the current value but can be displayed via the content slot or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperLevelIndicator.composable#StepperLevelIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material3.LevelIndicatorColors,androidx.compose.ui.unit.Dp,kotlin.Float,kotlin.Boolean)` if required. To add range semantics on Stepper, use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/rangeSemantics.modifier#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)`. Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` with integer values: ```kotlin import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.wear.compose.material3.Stepper import androidx.wear.compose.material3.StepperDefaults import androidx.wear.compose.material3.StepperLevelIndicator import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.samples.icons.VolumeDownIcon import androidx.wear.compose.material3.samples.icons.VolumeUpIcon var value by remember { mutableIntStateOf(3) } val valueProgression = remember { 0..10 } Box(modifier = Modifier.fillMaxSize()) { Stepper( value = value, onValueChange = { value = it }, valueProgression = valueProgression, decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) }, increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) }, ) { Text(String.format("Value: %d".format(value))) } StepperLevelIndicator( value = { value }, valueProgression = valueProgression, modifier = Modifier.align(Alignment.CenterStart), ) } ``` ![StepperWithIntegerSample Composite Image](https://developer.android.com/wear/images/design/WearComposeM3_StepperWithIntegerSample_CompositeImage.png) A number of steps is calculated as the difference between max and min values of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`.step - 1. For example, with a range of 100..120 and a step 5, number of steps will be (120-100)/ 5 - 1 = 3. Steps are 100(first), 105, 110, 115, 120(last) If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` range is not equally divisible by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`.step, then `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`.last will be adjusted to the closest divisible value in the range. For example, 1..13 range and a step = 5, steps will be 1(first), 6, 11(last) If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` is not equal to any step value, then it will be coerced to the closest step value. However, the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` itself will not be changed and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` in this case will not be triggered. | Parameters | |---|---| | `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Current value of the Stepper. If outside of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` provided, value will be coerced to this range. | | `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda in which value should be updated. | | `valueProgression: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-progression/index.html` | Progression of values that Stepper value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size. | | `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the decrease (bottom) button. | | `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the increase (top) button. | | `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Stepper layout. | | `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` is enabled. | | `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors = StepperDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors` that will be used to resolve the colors used for this `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperDefaults#colors()`. | | `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content body for the Stepper. | ### Stepper Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Stepper.kt+function:Stepper) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0) ``` @Composable fun Stepper(     value: Float,     onValueChange: (Float) -> Unit,     steps: Int,     decreaseIcon: @Composable () -> Unit,     increaseIcon: @Composable () -> Unit,     modifier: Modifier = Modifier,     enabled: Boolean = true,     valueRange: ClosedFloatingPointRange = 0f..(steps + 1).toFloat(),     colors: StepperColors = StepperDefaults.colors(),     content: @Composable BoxScope.() -> Unit ): Unit ``` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` allows users to make a selection from a range of values. It's a full-screen control with increase button on the top, decrease button on the bottom and a slot (expected to have either `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`) in the middle. Value can be increased and decreased by clicking on the increase and decrease buttons. Buttons can have custom icons - `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`. Step value is calculated as the difference between min and max values divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`+1. Stepper itself doesn't show the current value but can be displayed via the content slot or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperLevelIndicator.composable#StepperLevelIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material3.LevelIndicatorColors,androidx.compose.ui.unit.Dp,kotlin.Float,kotlin.Boolean)` if required. If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` is not equal to any step value, then it will be coerced to the closest step value. However, the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` itself will not be changed and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` in this case will not be triggered. To add range semantics on Stepper, use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/rangeSemantics.modifier#(androidx.compose.ui.Modifier).rangeSemantics(kotlin.Float,kotlin.Boolean,kotlin.Function1,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int)`. Example of a simple `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperLevelIndicator.composable#StepperLevelIndicator(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material3.LevelIndicatorColors,androidx.compose.ui.unit.Dp,kotlin.Float,kotlin.Boolean)`: ```kotlin import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.wear.compose.material3.Stepper import androidx.wear.compose.material3.StepperDefaults import androidx.wear.compose.material3.StepperLevelIndicator import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.samples.icons.VolumeDownIcon import androidx.wear.compose.material3.samples.icons.VolumeUpIcon var value by remember { mutableFloatStateOf(2f) } val valueRange = remember { 0f..4f } Box(modifier = Modifier.fillMaxSize()) { Stepper( value = value, onValueChange = { value = it }, valueRange = valueRange, steps = 7, decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) }, increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) }, ) { Text(String.format("Value: %.1f".format(value))) } StepperLevelIndicator( value = { value }, valueRange = valueRange, modifier = Modifier.align(Alignment.CenterStart), ) } ``` ![StepperSample Composite Image](https://developer.android.com/wear/images/design/WearComposeM3_StepperSample_CompositeImage.png) Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` with range semantics: ```kotlin import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.wear.compose.material3.Stepper import androidx.wear.compose.material3.StepperDefaults import androidx.wear.compose.material3.StepperLevelIndicator import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.rangeSemantics import androidx.wear.compose.material3.samples.icons.VolumeDownIcon import androidx.wear.compose.material3.samples.icons.VolumeUpIcon var value by remember { mutableFloatStateOf(2f) } val valueRange = remember { 0f..4f } val onValueChange = { i: Float -> value = i } val steps = 7 Box(modifier = Modifier.fillMaxSize()) { Stepper( value = value, onValueChange = onValueChange, valueRange = valueRange, modifier = Modifier.rangeSemantics(value, true, onValueChange, valueRange, steps), steps = steps, decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) }, increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) }, ) { Text("Value: $value") } StepperLevelIndicator( value = { value }, valueRange = valueRange, modifier = Modifier.align(Alignment.CenterStart), ) } ``` Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` with Custom icons and Button content: ```kotlin import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.width import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import androidx.wear.compose.material3.Button import androidx.wear.compose.material3.Stepper import androidx.wear.compose.material3.StepperDefaults import androidx.wear.compose.material3.StepperLevelIndicator import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.samples.icons.HeadphoneIcon import androidx.wear.compose.material3.samples.icons.VolumeDownIcon import androidx.wear.compose.material3.samples.icons.VolumeUpIcon var value by remember { mutableFloatStateOf(2f) } val valueRange = remember { 0f..4f } Box(modifier = Modifier.fillMaxSize()) { Stepper( value = value, onValueChange = { value = it }, valueRange = valueRange, increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) }, decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) }, steps = 7, ) { Text(String.format("Value: %.1f".format(value))) Button( onClick = {}, modifier = Modifier.width(150.dp), label = { Text(text = "This watch", modifier = Modifier.fillMaxWidth()) }, secondaryLabel = { Text(text = "Headphones", modifier = Modifier.fillMaxWidth()) }, icon = { HeadphoneIcon(24.dp) }, ) } StepperLevelIndicator( value = { value }, valueRange = valueRange, modifier = Modifier.align(Alignment.CenterStart), ) } ``` ![StepperWithButtonSample Composite Image](https://developer.android.com/wear/images/design/WearComposeM3_StepperWithButtonSample_CompositeImage.png) | Parameters | |---|---| | `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Current value of the Stepper. If outside of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` provided, value will be coerced to this range. | | `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda in which value should be updated. | | `steps: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, stepper will have only min and max values and no steps in between. | | `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the decrease (bottom) button. | | `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the increase (top) button. | | `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Stepper layout. | | `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` is enabled. | | `valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html = 0f..(steps + 1).toFloat()` | Range of values that Stepper value can take. Passed `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)` will be coerced to this range. | | `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors = StepperDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperColors` that will be used to resolve the colors used for this `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Stepper.composable#Stepper(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,androidx.wear.compose.material3.StepperColors,kotlin.Function1)`. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/StepperDefaults#colors()`. | | `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content body for the Stepper. |