Slider

Sliders for continuous values, stepped ranges, and vertical controls.

Use sliders when people need to adjust a value across a bounded range.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.ui.components.Slider

@Composable
fun SliderExample() {
    var value by remember { mutableFloatStateOf(0.45f) }
    Column(
        modifier = Modifier,
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        Slider(value = value, onValueChange = { value = it }, modifier = Modifier.fillMaxWidth())
    }
}

Installation

implementation("com.composables:ui:0.1.0")

Add the required dependencies

implementation("com.composables:composeunstyled:2.7.0")

Copy and paste the following sources into your project

components/Slider.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.alphas
import com.composables.ui.theme.colors
import com.composables.ui.theme.disabledAlpha
import com.composables.ui.theme.primaryColor
import com.composables.ui.theme.ringColor
import com.composables.ui.theme.secondaryColor
import com.composables.ui.theme.thumbColor
import com.composeunstyled.FocusRingVisibility
import com.composeunstyled.SliderState
import com.composeunstyled.UnstyledSlider
import com.composeunstyled.buildModifier
import com.composeunstyled.theme.Theme

/**
 * A slider for selecting a value from a bounded range.
 * @param value Current value shown by the slider.
 * @param onValueChange Called when the slider value changes.
 * @param modifier Modifier applied to the slider.
 * @param enabled Whether the slider can be interacted with.
 * @param valueRange Minimum and maximum values allowed by the slider.
 * @param steps Number of discrete steps between the range endpoints.
 * @param orientation Whether the slider is laid out horizontally or vertically.
 * @param onValueChangeFinished Called when a drag or input interaction finishes.
 * @param interactionSource Interaction source used for focus, drag, and press state.
 */
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    orientation: Orientation = Orientation.Horizontal,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) {
    val shape = RoundedCornerShape(999.dp)
    UnstyledSlider(
        value = value,
        onValueChange = onValueChange,
        enabled = enabled,
        valueRange = valueRange,
        steps = steps,
        onValueChangeFinished = onValueChangeFinished,
        orientation = orientation,
        interactionSource = interactionSource,
        modifier = modifier
            .heightIn(min = 32.dp)
            .then(buildModifier { if (!enabled) add(Modifier.alpha(Theme[alphas][disabledAlpha])) }),
        track = { SliderTrack(it, shape, filledColor = Theme[colors][primaryColor]) },
        thumb = { SliderThumb(interactionSource) },
    )
}

@Composable
private fun SliderTrack(
    state: SliderState,
    shape: Shape,
    backgroundColor: Color = Theme[colors][secondaryColor],
    filledColor: Color,
) {
    if (state.orientation == Orientation.Vertical) {
        Box(
            modifier = Modifier
                .width(SliderThumbSize)
                .fillMaxHeight(),
            contentAlignment = Alignment.Center,
        ) {
            Box(
                Modifier
                    .width(SliderTrackHeight)
                    .fillMaxHeight()
                    .padding(vertical = SliderThumbSize / 2)
                    .clip(shape)
                    .background(backgroundColor, shape),
                contentAlignment = Alignment.BottomCenter,
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(state.fraction)
                        .background(filledColor)
                )
            }
        }
    } else {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(SliderThumbSize),
            contentAlignment = Alignment.Center,
        ) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .padding(horizontal = SliderThumbSize / 2)
                    .height(SliderTrackHeight)
                    .clip(shape)
                    .background(backgroundColor, shape)
            ) {
                Box(
                    Modifier.fillMaxWidth(state.fraction).height(SliderTrackHeight)
                        .background(filledColor)
                )
            }
        }
    }
}

@Composable
private fun SliderThumb(interactionSource: MutableInteractionSource) {
    Box(
        Modifier
            .focusRing(
                interactionSource = interactionSource,
                color = Theme[colors][ringColor],
                shape = CircleShape,
                visibility = FocusRingVisibility.Focused,
            )
            .border(1.dp, Theme[colors][ringColor], CircleShape)
            .size(SliderThumbSize)
            .background(Theme[colors][thumbColor], CircleShape)
    )
}

private val SliderTrackHeight = 6.dp
private val SliderThumbSize = 18.dp

components/Utils.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.colors
import com.composables.ui.theme.ringColor
import com.composeunstyled.FocusRingVisibility
import com.composeunstyled.collectIsFocusVisibleAsState
import com.composeunstyled.outline
import com.composeunstyled.theme.Theme

@Composable
fun Modifier.focusRing(
    interactionSource: InteractionSource,
    width: Dp = 2.dp,
    color: Color = Theme[colors][ringColor],
    shape: Shape = RectangleShape,
    offset: Dp = 0.dp,
    visibility: FocusRingVisibility = FocusRingVisibility.FocusVisible,
): Modifier {
    val showFocusRing by if (visibility == FocusRingVisibility.FocusVisible) {
        interactionSource.collectIsFocusVisibleAsState()
    } else {
        interactionSource.collectIsFocusedAsState()
    }
    val animatedWidth by animateDpAsState(
        targetValue = if (showFocusRing) width else 0.dp,
        animationSpec = tween(durationMillis = 120),
        label = "FocusRingWidth",
    )

    return this then Modifier.outline(
        width = animatedWidth,
        color = color,
        shape = shape,
        offset = offset,
    )
}

@Composable
fun Modifier.bouncyPress(
    interactionSource: InteractionSource,
    enabled: Boolean = true,
    pressedScale: Float = 0.98f,
): Modifier {
    val pressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (enabled && pressed) pressedScale else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMediumLow,
        ),
        label = "BouncyPressScale",
    )

    return this then Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
}

Examples

Vertical

ExpandCollapseView on GitHub

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.ui.components.Slider

@Composable
fun VerticalSliderExample() {
    var value by remember { mutableFloatStateOf(0.45f) }
    Slider(
        value = value,
        onValueChange = { value = it },
        orientation = Orientation.Vertical,
        modifier = Modifier.height(180.dp),
    )
}

Disabled

ExpandCollapseView on GitHub

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.composables.ui.components.Slider

@Composable
fun DisabledSliderExample() {
    Slider(
        value = 0.45f,
        onValueChange = {},
        enabled = false,
        modifier = Modifier.fillMaxWidth(),
    )
}

Stepped

ExpandCollapseView on GitHub

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.ui.components.Slider

@Composable
fun SteppedSliderExample() {
    var value by remember { mutableFloatStateOf(50f) }
    Slider(
        value = value,
        onValueChange = { value = it },
        valueRange = 0f..100f,
        steps = 4,
        modifier = Modifier.fillMaxWidth(),
    )
}

API Reference

A slider for selecting a value from a bounded range.

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    orientation: Orientation = Orientation.Horizontal,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

Parameter	Type	Description
`value`	`Float`	Current value shown by the slider.
`onValueChange`	`(Float) -> Unit`	Called when the slider value changes.
`modifier`	`Modifier`	Modifier applied to the slider.
`enabled`	`Boolean`	Whether the slider can be interacted with.
`valueRange`	`ClosedFloatingPointRange<Float>`	Minimum and maximum values allowed by the slider.
`steps`	`Int`	Number of discrete steps between the range endpoints.
`orientation`	`Orientation`	Whether the slider is laid out horizontally or vertically.
`onValueChangeFinished`	`(() -> Unit)?`	Called when a drag or input interaction finishes.
`interactionSource`	`MutableInteractionSource`	Interaction source used for focus, drag, and press state.

Slider

Installation

Gradle

Copy & Paste

Add the required dependencies

Copy and paste the following sources into your project

Examples

Vertical

Disabled

Stepped

API Reference

Slider