{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

SliderKt

public final class SliderKt


Summary

Public methods

static final void
@Composable
RangeSlider(
    @NonNull ClosedFloatingPointRange<@NonNull Float> value,
    @NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    @IntRange int steps,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors
)

Material Design Range slider.

static final void
@Composable
@ExperimentalMaterial3Api
RangeSlider(
    @NonNull RangeSliderState state,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource startInteractionSource,
    @NonNull MutableInteractionSource endInteractionSource,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track
)

Material Design Range slider.

static final void
@Composable
@ExperimentalMaterial3Api
RangeSlider(
    @NonNull ClosedFloatingPointRange<@NonNull Float> value,
    @NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource startInteractionSource,
    @NonNull MutableInteractionSource endInteractionSource,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track,
    @IntRange int steps
)

Material Design Range slider.

static final void
@Composable
@ExperimentalMaterial3Api
Slider(
    @NonNull SliderState state,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> thumb,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> track
)

Material Design slider.

static final void
@Composable
Slider(
    float value,
    @NonNull Function1<@NonNull FloatUnit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    @IntRange int steps,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design slider.

static final void
@Composable
@ExperimentalMaterial3Api
Slider(
    float value,
    @NonNull Function1<@NonNull FloatUnit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @IntRange int steps,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> thumb,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> track,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange
)

Material Design slider.

Public methods

RangeSlider

@Composable
public static final void RangeSlider(
    @NonNull ClosedFloatingPointRange<@NonNull Float> value,
    @NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    @IntRange int steps,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors
)

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(rangeSliderState.activeRangeStart)
    val rangeEnd = "%.2f".format(rangeSliderState.activeRangeEnd)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = rangeSliderState.activeRangeStart.roundToInt()
    val rangeEnd = rangeSliderState.activeRangeEnd.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}
Parameters
@NonNull ClosedFloatingPointRange<@NonNull Float> value

current values of the RangeSlider. If either value is outside of valueRange provided, it will be coerced to this range.

@NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange

lambda in which values should be updated

@NonNull Modifier modifier

modifiers for the Range Slider layout

boolean enabled

whether or not component is enabled and can we interacted with or not

@NonNull ClosedFloatingPointRange<@NonNull Float> valueRange

range of values that Range Slider values can take. Passed value will be coerced to this range

@IntRange int steps

if greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, range slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.

Function0<Unit> onValueChangeFinished

lambda to be invoked when value change has ended. This callback shouldn't be used to update the range slider values (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.

@NonNull SliderColors colors

SliderColors that will be used to determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

RangeSlider

@Composable
@ExperimentalMaterial3Api
public static final void RangeSlider(
    @NonNull RangeSliderState state,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource startInteractionSource,
    @NonNull MutableInteractionSource endInteractionSource,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track
)

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

It uses the provided startThumb for the slider's start thumb and endThumb for the slider's end thumb. It also uses the provided track for the slider's track. If nothing is passed for these parameters, it will use SliderDefaults.Thumb and SliderDefaults.Track for the thumbs and track.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(rangeSliderState.activeRangeStart)
    val rangeEnd = "%.2f".format(rangeSliderState.activeRangeEnd)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = rangeSliderState.activeRangeStart.roundToInt()
    val rangeEnd = rangeSliderState.activeRangeEnd.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}

A custom start/end thumb and track can be provided:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }
val startThumbAndTrackColors = SliderDefaults.colors(
    thumbColor = Color.Blue,
    activeTrackColor = Color.Red
)
val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        startInteractionSource = startInteractionSource,
        endInteractionSource = endInteractionSource,
        startThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeStart))
                    }
                },
                interactionSource = startInteractionSource
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeEnd))
                    }
                },
                interactionSource = endInteractionSource
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState
            )
        }
    )
}
Parameters
@NonNull RangeSliderState state

RangeSliderState which contains the current values of the RangeSlider.

@NonNull Modifier modifier

modifiers for the Range Slider layout

boolean enabled

whether or not component is enabled and can we interacted with or not

@NonNull SliderColors colors

SliderColors that will be used to determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

@NonNull MutableInteractionSource startInteractionSource

the MutableInteractionSource representing the stream of Interactions for the start thumb. You can create and pass in your own remembered instance to observe.

@NonNull MutableInteractionSource endInteractionSource

the MutableInteractionSource representing the stream of Interactions for the end thumb. You can create and pass in your own remembered instance to observe.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb

the start thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb

the end thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track

the track to be displayed on the range slider, it is placed underneath the thumb. The lambda receives a RangeSliderState which is used to obtain the current active track.

RangeSlider

@Composable
@ExperimentalMaterial3Api
public static final void RangeSlider(
    @NonNull ClosedFloatingPointRange<@NonNull Float> value,
    @NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource startInteractionSource,
    @NonNull MutableInteractionSource endInteractionSource,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb,
    @Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track,
    @IntRange int steps
)

Material Design Range slider.

Range Sliders expand upon Slider using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

It uses the provided startThumb for the slider's start thumb and endThumb for the slider's end thumb. It also uses the provided track for the slider's track. If nothing is passed for these parameters, it will use SliderDefaults.Thumb and SliderDefaults.Track for the thumbs and track.

Use continuous Range Sliders to allow users to make meaningful selections that don’t require a specific values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(rangeSliderState.activeRangeStart)
    val rangeEnd = "%.2f".format(rangeSliderState.activeRangeEnd)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = rangeSliderState.activeRangeStart.roundToInt()
    val rangeEnd = rangeSliderState.activeRangeEnd.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" }
    )
}

A custom start/end thumb and track can be provided:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.RangeSliderState
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val rangeSliderState = remember {
    RangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }
val startThumbAndTrackColors = SliderDefaults.colors(
    thumbColor = Color.Blue,
    activeTrackColor = Color.Red
)
val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        startInteractionSource = startInteractionSource,
        endInteractionSource = endInteractionSource,
        startThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeStart))
                    }
                },
                interactionSource = startInteractionSource
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeEnd))
                    }
                },
                interactionSource = endInteractionSource
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState
            )
        }
    )
}
Parameters
@NonNull ClosedFloatingPointRange<@NonNull Float> value

current values of the RangeSlider. If either value is outside of valueRange provided, it will be coerced to this range.

@NonNull Function1<@NonNull ClosedFloatingPointRange<@NonNull Float>, Unit> onValueChange

lambda in which values should be updated

@NonNull Modifier modifier

modifiers for the Range Slider layout

boolean enabled

whether or not component is enabled and can we interacted with or not

@NonNull ClosedFloatingPointRange<@NonNull Float> valueRange

range of values that Range Slider values can take. Passed value will be coerced to this range.

Function0<Unit> onValueChangeFinished

lambda to be invoked when value change has ended. This callback shouldn't be used to update the range slider values (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.

@NonNull SliderColors colors

SliderColors that will be used to determine the color of the Range Slider parts in different state. See SliderDefaults.colors to customize.

@NonNull MutableInteractionSource startInteractionSource

the MutableInteractionSource representing the stream of Interactions for the start thumb. You can create and pass in your own remembered instance to observe.

@NonNull MutableInteractionSource endInteractionSource

the MutableInteractionSource representing the stream of Interactions for the end thumb. You can create and pass in your own remembered instance to observe.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> startThumb

the start thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> endThumb

the end thumb to be displayed on the Range Slider. The lambda receives a RangeSliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull RangeSliderStateUnit> track

the track to be displayed on the range slider, it is placed underneath the thumb. The lambda receives a RangeSliderState which is used to obtain the current active track.

@IntRange int steps

if greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, range slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.

Slider

@Composable
@ExperimentalMaterial3Api
public static final void Slider(
    @NonNull SliderState state,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> thumb,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> track
)

Material Design slider.

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders image

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = "%.2f".format(sliderPosition))
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it })
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = sliderPosition.roundToInt().toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}

Slider using a custom thumb:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        thumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(sliderPosition))
                    }
                },
                interactionSource = interactionSource
            ) {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    contentDescription = null,
                    modifier = Modifier.size(ButtonDefaults.IconSize),
                    tint = Color.Red
                )
            }
        }
    )
}

Slider using custom track and thumb:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val sliderState = remember {
    SliderState(
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
val interactionSource = remember { MutableInteractionSource() }
val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = "%.2f".format(sliderState.value))
    Slider(
        state = sliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        interactionSource = interactionSource,
        thumb = {
            SliderDefaults.Thumb(
                interactionSource = interactionSource,
                colors = colors
            )
        },
        track = {
            SliderDefaults.Track(
                colors = colors,
                sliderState = sliderState
            )
        }
    )
}
Parameters
@NonNull SliderState state

SliderState which contains the slider's current value.

@NonNull Modifier modifier

the Modifier to be applied to this slider

boolean enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull SliderColors colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

@Composable @NonNull Function1<@NonNull SliderStateUnit> thumb

the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a SliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull SliderStateUnit> track

the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a SliderState which is used to obtain the current active track.

Slider

@Composable
public static final void Slider(
    float value,
    @NonNull Function1<@NonNull FloatUnit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange,
    @IntRange int steps,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design slider.

Sliders allow users to make selections from a range of values.

It uses SliderDefaults.Thumb and SliderDefaults.Track as the thumb and track.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders image

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = "%.2f".format(sliderPosition))
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it })
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = sliderPosition.roundToInt().toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}
Parameters
float value

current value of the slider. If outside of valueRange provided, value will be coerced to this range.

@NonNull Function1<@NonNull FloatUnit> onValueChange

callback in which value should be updated

@NonNull Modifier modifier

the Modifier to be applied to this slider

boolean enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull ClosedFloatingPointRange<@NonNull Float> valueRange

range of values that this slider can take. The passed value will be coerced to this range.

@IntRange int steps

if greater than 0, specifies the amount of discrete allowable values, evenly distributed across the whole value range. If 0, the slider will behave continuously and allow any value from the range specified. Must not be negative.

Function0<Unit> onValueChangeFinished

called when value change has ended. This should not be used to update the slider value (use onValueChange instead), but rather to know when the user has completed selecting a new value by ending a drag or a click.

@NonNull SliderColors colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

Slider

@Composable
@ExperimentalMaterial3Api
public static final void Slider(
    float value,
    @NonNull Function1<@NonNull FloatUnit> onValueChange,
    @NonNull Modifier modifier,
    boolean enabled,
    Function0<Unit> onValueChangeFinished,
    @NonNull SliderColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @IntRange int steps,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> thumb,
    @Composable @NonNull Function1<@NonNull SliderStateUnit> track,
    @NonNull ClosedFloatingPointRange<@NonNull Float> valueRange
)

Material Design slider.

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders image

Use continuous sliders to allow users to make meaningful selections that don’t require a specific value:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = "%.2f".format(sliderPosition))
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it })
}

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = sliderPosition.roundToInt().toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        steps = 4
    )
}

Slider using a custom thumb:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

var sliderPosition by remember { mutableStateOf(0f) }
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        thumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier
                            .requiredSize(45.dp, 25.dp)
                            .wrapContentWidth()
                    ) {
                        Text("%.2f".format(sliderPosition))
                    }
                },
                interactionSource = interactionSource
            ) {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    contentDescription = null,
                    modifier = Modifier.size(ButtonDefaults.IconSize),
                    tint = Color.Red
                )
            }
        }
    )
}

Slider using custom track and thumb:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val sliderState = remember {
    SliderState(
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        }
    )
}
val interactionSource = remember { MutableInteractionSource() }
val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Text(text = "%.2f".format(sliderState.value))
    Slider(
        state = sliderState,
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        interactionSource = interactionSource,
        thumb = {
            SliderDefaults.Thumb(
                interactionSource = interactionSource,
                colors = colors
            )
        },
        track = {
            SliderDefaults.Track(
                colors = colors,
                sliderState = sliderState
            )
        }
    )
}
Parameters
float value

current value of the slider. If outside of valueRange provided, value will be coerced to this range.

@NonNull Function1<@NonNull FloatUnit> onValueChange

callback in which value should be updated

@NonNull Modifier modifier

the Modifier to be applied to this slider

boolean enabled

controls the enabled state of this slider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

Function0<Unit> onValueChangeFinished

called when value change has ended. This should not be used to update the slider value (use onValueChange instead), but rather to know when the user has completed selecting a new value by ending a drag or a click.

@NonNull SliderColors colors

SliderColors that will be used to resolve the colors used for this slider in different states. See SliderDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this slider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this slider in different states.

@IntRange int steps

if greater than 0, specifies the amount of discrete allowable values, evenly distributed across the whole value range. If 0, the slider will behave continuously and allow any value from the range specified. Must not be negative.

@Composable @NonNull Function1<@NonNull SliderStateUnit> thumb

the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a SliderState which is used to obtain the current active track.

@Composable @NonNull Function1<@NonNull SliderStateUnit> track

the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a SliderState which is used to obtain the current active track.

@NonNull ClosedFloatingPointRange<@NonNull Float> valueRange

range of values that this slider can take. The passed value will be coerced to this range.