Slider

Select a value from a range using a sliding component

View in Playground

Constructors

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    @IntRange(from = 0) steps: Int = 0,
    onValueChangeEnd: () -> Unit = {},
    color: Color = MaterialTheme.colors.primary
)
  • value – current selected value for the slider
    • required
  • onValueChange – callback triggered whenever the selected value changes. E.g everytime a value is selected whilst the slider is being interacted with
    • required
  • modifier – modifier to be applued to the slider

  • valueRange – range of values used to make up the values of the slider

  • onValueChangeEnd – callback triggered when value selection has completed. E.g the slider is not being dragged, with the value representing the final state of the slide

  • color – the color to be used for the slider

Examples

Minimal slider

val state = state { 0f }
Column(horizontalGravity = Alignment.CenterHorizontally) {
    Text(text = state.value.toString())
    Slider(
        value = state.value,
        onValueChange = {
            state.value = it
        }
    )
}

Slider

Ranged slider

val state = state { 0f }
Column(horizontalGravity = Alignment.CenterHorizontally) {
    Text(text = state.value.toString())
    Slider(
        value = state.value,
        onValueChange = {
            state.value = it
        },
        valueRange = 0f..5f
    )
}

Stepped slider

val state = state { 0f }
Column(horizontalGravity = Alignment.CenterHorizontally) {
    Text(text = state.value.toString())
    Slider(
        value = state.value,
        onValueChange = {
            state.value = it
        },
        steps = 3
    )
}

Slider

Colored slider

val state = state { 0f }
Column(horizontalGravity = Alignment.CenterHorizontally) {
    Text(text = state.value.toString())
    Slider(
        value = state.value,
        onValueChange = {
            state.value = it
        },
        color = Color.Red
    )
}

Slider

Slider with listener

val state = state { 0f }
val endState = state { 0f }
Column(horizontalGravity = Alignment.CenterHorizontally) {
    Text(text = endState.value.toString())
    Slider(
        value = state.value,
        onValueChange = {
            state.value = it
        },
        onValueChangeEnd = {
            endState.value = state.value
        },
        color = Color.Red
    )
}