Object

SliderDefaults

Object to hold defaults used by Slider

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
object SliderDefaults

Object to hold defaults used by Slider

Properties

Common
val TrackStopIndicatorSize: Dp

The default size for the stop indicator at the end of the track.

Common
val TickSize: Dp

The default size for the ticks if steps are greater than 0.

Functions

@Composable fun colors() = MaterialTheme.colorScheme.defaultSliderColors

Creates a SliderColors that represents the different colors used in parts of the Slider in different states.

colors

@Composable
    fun colors(
        thumbColor: Color = Color.Unspecified,
        activeTrackColor: Color = Color.Unspecified,
        activeTickColor: Color = Color.Unspecified,
        inactiveTrackColor: Color = Color.Unspecified,
        inactiveTickColor: Color = Color.Unspecified,
        disabledThumbColor: Color = Color.Unspecified,
        disabledActiveTrackColor: Color = Color.Unspecified,
        disabledActiveTickColor: Color = Color.Unspecified,
        disabledInactiveTrackColor: Color = Color.Unspecified,
        disabledInactiveTickColor: Color = Color.Unspecified,
    ): SliderColors

Creates a SliderColors that represents the different colors used in parts of the Slider in different states.

For the name references below the words "active" and "inactive" are used. Active part of the slider is filled with progress, so if slider's progress is 30% out of 100%, left (or right in RTL) 30% of the track will be active, while the rest is inactive.

Parameters
thumbColor thumb color when enabled
activeTrackColor color of the track in the part that is "active", meaning that the thumb is ahead of it
activeTickColor colors to be used to draw tick marks on the active track, if steps is specified
inactiveTrackColor color of the track in the part that is "inactive", meaning that the thumb is before it
inactiveTickColor colors to be used to draw tick marks on the inactive track, if steps are specified on the Slider is specified
disabledThumbColor thumb colors when disabled
disabledActiveTrackColor color of the track in the "active" part when the Slider is disabled
disabledActiveTickColor colors to be used to draw tick marks on the active track when Slider is disabled and when steps are specified on it
disabledInactiveTrackColor color of the track in the "inactive" part when the Slider is disabled
disabledInactiveTickColor colors to be used to draw tick marks on the inactive part of the track when Slider is disabled and when steps are specified on it

Thumb

@Composable
    fun Thumb(
        interactionSource: MutableInteractionSource,
        modifier: Modifier = Modifier,
        colors: SliderColors = colors(),
        enabled: Boolean = true,
        thumbSize: DpSize = ThumbSize,
    ) =
        Thumb(
            interactionSource = interactionSource,
            modifier = modifier,
            colors = colors,
            enabled = enabled,
            thumbSize = thumbSize,
            isVertical = false,
        )

The Default thumb for Slider and RangeSlider

Parameters
interactionSource the MutableInteractionSource representing the stream of Interactions for this thumb. You can create and pass in your own remembered instance to observe
modifier the Modifier to be applied to the thumb.
colors SliderColors that will be used to resolve the colors used for this thumb in different states. See SliderDefaults.colors.
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.
thumbSize the size of the thumb.

Thumb

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun Thumb(
        interactionSource: MutableInteractionSource,
        sliderState: SliderState,
        modifier: Modifier = Modifier,
        colors: SliderColors = colors(),
        enabled: Boolean = true,
        thumbSize: DpSize = ThumbSize,
    ) =
        Thumb(
            interactionSource = interactionSource,
            modifier = modifier,
            colors = colors,
            enabled = enabled,
            thumbSize = thumbSize,
            isVertical = sliderState.orientation == Vertical,
        )

The Default thumb for Slider, VerticalSlider and RangeSlider

Parameters
interactionSource the MutableInteractionSource representing the stream of Interactions for this thumb. You can create and pass in your own remembered instance to observe
sliderState SliderState which is used to obtain the current active track.
modifier the Modifier to be applied to the thumb.
colors SliderColors that will be used to resolve the colors used for this thumb in different states. See SliderDefaults.colors.
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.
thumbSize the size of the thumb.

Track

@Composable
    
    fun Track(
        sliderPositions: SliderPositions,
        modifier: Modifier = Modifier,
        colors: SliderColors = colors(),
        enabled: Boolean = true,
    )

The Default track for Slider and RangeSlider

Parameters
sliderPositions SliderPositions which is used to obtain the current active track and the tick positions if the slider is discrete.
modifier the Modifier to be applied to the track.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
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.

Track

@Composable
    fun Track(
        sliderState: SliderState,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        colors: SliderColors = colors(),
        drawStopIndicator: (DrawScope.(Offset) -> Unit)? = {
            drawStopIndicator(
                offset = it,
                color = colors.trackColor(enabled, active = true),
                size = TrackStopIndicatorSize,
            )
        },
        drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
            drawStopIndicator(offset = offset, color = color, size = TickSize)
        },
        thumbTrackGapSize: Dp = ThumbTrackGapSize,
        trackInsideCornerSize: Dp = TrackInsideCornerSize,
    )

The Default track for Slider

Parameters
sliderState SliderState which is used to obtain the current active track.
modifier the Modifier to be applied to the track.
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.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
drawStopIndicator lambda that will be called to draw the stop indicator at the end of the track.
drawTick lambda that will be called to draw the ticks if steps are greater than 0.
thumbTrackGapSize size of the gap between the thumb and the track.
trackInsideCornerSize size of the corners towards the thumb when a gap is set.

Track

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun Track(
        sliderState: SliderState,
        trackCornerSize: Dp,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        colors: SliderColors = colors(),
        drawStopIndicator: (DrawScope.(Offset) -> Unit)? = {
            drawStopIndicator(
                offset = it,
                color = colors.trackColor(enabled, active = true),
                size = TrackStopIndicatorSize,
            )
        },
        drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
            drawStopIndicator(offset = offset, color = color, size = TickSize)
        },
        thumbTrackGapSize: Dp = ThumbTrackGapSize,
        trackInsideCornerSize: Dp = TrackInsideCornerSize,
    )

The Default track for Slider and VerticalSlider

This track has a different corner treatment where the corner size decreases as the thumb gets closer.

Parameters
sliderState SliderState which is used to obtain the current active track.
trackCornerSize size of the external corners.
modifier the Modifier to be applied to the track.
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.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
drawStopIndicator lambda that will be called to draw the stop indicator at the end of the track.
drawTick lambda that will be called to draw the ticks if steps are greater than 0.
thumbTrackGapSize size of the gap between the thumb and the track.
trackInsideCornerSize size of the corners towards the thumb when a gap is set.

CenteredTrack

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun CenteredTrack(
        sliderState: SliderState,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        colors: SliderColors = colors(),
        drawStopIndicator: (DrawScope.(Offset) -> Unit)? = {
            drawStopIndicator(
                offset = it,
                color = colors.trackColor(enabled, active = true),
                size = TrackStopIndicatorSize,
            )
        },
        drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
            drawStopIndicator(offset = offset, color = color, size = TickSize)
        },
        thumbTrackGapSize: Dp = ThumbTrackGapSize,
        trackInsideCornerSize: Dp = TrackInsideCornerSize,
        trackCornerSize: Dp = Dp.Unspecified,
    )

The Default centered track for Slider and VerticalSlider

This track starts from the center of the slider.

Parameters
sliderState SliderState which is used to obtain the current active track.
modifier the Modifier to be applied to the track.
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.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
drawStopIndicator lambda that will be called to draw the stop indicator at the end of the track.
drawTick lambda that will be called to draw the ticks if steps are greater than 0.
thumbTrackGapSize size of the gap between the thumb and the track.
trackInsideCornerSize size of the corners towards the thumb when a gap is set.
trackCornerSize size of the external corners.

Track

@Composable
    fun Track(
        rangeSliderState: RangeSliderState,
        modifier: Modifier = Modifier,
        colors: SliderColors = colors(),
        enabled: Boolean = true,
    )

The Default track for RangeSlider

Parameters
rangeSliderState RangeSliderState which is used to obtain the current active track.
modifier the Modifier to be applied to the track.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
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.

Track

@Composable
    fun Track(
        rangeSliderState: RangeSliderState,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        colors: SliderColors = colors(),
        drawStopIndicator: (DrawScope.(Offset) -> Unit)? = {
            drawStopIndicator(
                offset = it,
                color = colors.trackColor(enabled, active = true),
                size = TrackStopIndicatorSize,
            )
        },
        drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
            drawStopIndicator(offset = offset, color = color, size = TickSize)
        },
        thumbTrackGapSize: Dp = ThumbTrackGapSize,
        trackInsideCornerSize: Dp = TrackInsideCornerSize,
    )

The Default track for RangeSlider

Parameters
rangeSliderState RangeSliderState which is used to obtain the current active track.
modifier the Modifier to be applied to the track.
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.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
drawStopIndicator lambda that will be called to draw the stop indicator at the start/end of the track.
drawTick lambda that will be called to draw the ticks if steps are greater than 0.
thumbTrackGapSize size of the gap between the thumbs and the track.
trackInsideCornerSize size of the corners towards the thumbs when a gap is set.

Track

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun Track(
        rangeSliderState: RangeSliderState,
        trackCornerSize: Dp,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        colors: SliderColors = colors(),
        drawStopIndicator: (DrawScope.(Offset) -> Unit)? = {
            drawStopIndicator(
                offset = it,
                color = colors.trackColor(enabled, active = true),
                size = TrackStopIndicatorSize,
            )
        },
        drawTick: DrawScope.(Offset, Color) -> Unit = { offset, color ->
            drawStopIndicator(offset = offset, color = color, size = TickSize)
        },
        thumbTrackGapSize: Dp = ThumbTrackGapSize,
        trackInsideCornerSize: Dp = TrackInsideCornerSize,
    )

The Default track for RangeSlider

Parameters
rangeSliderState RangeSliderState which is used to obtain the current active track.
trackCornerSize size of the external corners.
modifier the Modifier to be applied to the track.
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.
colors SliderColors that will be used to resolve the colors used for this track in different states. See SliderDefaults.colors.
drawStopIndicator lambda that will be called to draw the stop indicator at the start/end of the track.
drawTick lambda that will be called to draw the ticks if steps are greater than 0.
thumbTrackGapSize size of the gap between the thumbs and the track.
trackInsideCornerSize size of the corners towards the thumbs when a gap is set.

drawStopIndicator

fun DrawScope.drawStopIndicator(offset: Offset, size: Dp, color: Color)

The Default stop indicator.

Parameters
offset the coordinate where the indicator is to be drawn.
size the size of the indicator.
color the color of the indicator.