---
title: "StepperLevelIndicator"
description: "Creates a `StepperLevelIndicator` for screens that that control a setting, such as volume, with a
`Stepper`."
type: "component"
---

<div class='type'>Composable Component</div>



Creates a `StepperLevelIndicator` for screens that that control a setting, such as volume, with a
`Stepper`.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun StepperLevelIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    @FloatRange(from = 0.0, to = 360.0) sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| value | Value of the indicator in the `valueRange`. |
| modifier | Modifier to be applied to the component |
| valueRange | range of values that `value` can take |
| enabled | Controls the enabled state of `LevelIndicator` - when false, disabled colors will be used. |
| colors | `LevelIndicatorColors` that will be used to resolve the indicator and track colors for this `LevelIndicator` in different states |
| strokeWidth | The stroke width for the indicator and track strokes |
| sweepAngle | The angle covered by the curved LevelIndicator, in degrees |
| reverseDirection | Reverses direction of PositionIndicator if true |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun StepperLevelIndicator(
    value: () -> Int,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    @FloatRange(from = 0.0, to = 360.0) sweepAngle: Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false,
): Unit
```


#### Parameters

| | |
| --- | --- |
| value | Current value of the Stepper. If outside of `valueProgression` provided, value will be coerced to this range. |
| modifier | Modifier to be applied to the component |
| valueProgression | Progression of values that `StepperLevelIndicator` value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size. |
| enabled | Controls the enabled state of `LevelIndicator` - when false, disabled colors will be used. |
| colors | `LevelIndicatorColors` that will be used to resolve the indicator and track colors for this `LevelIndicator` in different states |
| strokeWidth | The stroke width for the indicator and track strokes |
| sweepAngle | The angle covered by the curved LevelIndicator, in degrees |
| reverseDirection | Reverses direction of PositionIndicator if true |






## Code Examples
### StepperSample
```kotlin
@Composable
fun StepperSample() {
    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),
        )
    }
}
```
### StepperWithIntegerSample
```kotlin
@Composable
fun StepperWithIntegerSample() {
    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),
        )
    }
}
```