---
title: "VerticalSliderLegacy"
description: "Vertical Sliders allow users to make selections from a range of values."
type: "component"
social_image: "/static/images/material3/lqe2zb2b-1.png"
lastmod: "2026-07-02T02:32:45.897660Z"
---
## API Reference

### VerticalSliderLegacy

> **Deprecated** Maintained for binary compatibility. Use the version with topToBottom instead.

> Source set: Common

```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun VerticalSliderLegacy(
    state: SliderState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    thumb: @Composable (SliderState) -> Unit = { _ ->
        SliderDefaults.Thumb(
            interactionSource = interactionSource,
            isVertical = true,
            colors = colors,
            enabled = enabled,
            thumbSize = VerticalThumbSize,
        )
    },
    track: @Composable (SliderState) -> Unit = { sliderState ->
        SliderDefaults.Track(
            colors = colors,
            enabled = enabled,
            sliderState = sliderState,
            trackCornerSize = Dp.Unspecified,
        )
    },
) =
    VerticalSlider(
        state = state,
        modifier = modifier,
        enabled = enabled,
        topToBottom = !reverseDirection,
        colors = colors,
        interactionSource = interactionSource,
        thumb = thumb,
        track = track,
    )
```

#### Parameters

| | |
| --- | --- |
| state | [SliderState](/jetpack-compose/androidx.compose.material3/material3/classes/SliderState) which contains the slider's current value. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this slider |
| 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. |
| reverseDirection | controls the direction of this slider. Default is top to bottom. |
| colors | [SliderColors](/jetpack-compose/androidx.compose.material3/material3/classes/SliderColors) that will be used to resolve the colors used for this slider in different states. See [SliderDefaults.colors](/jetpack-compose/androidx.compose.material3/material3/objects/SliderDefaults). |
| interactionSource | the [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) representing the stream of [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this slider. You can create and pass in your own `remember`ed instance to observe [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s and customize the appearance / behavior of this slider in different states. |
| thumb | the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a [SliderState](/jetpack-compose/androidx.compose.material3/material3/classes/SliderState) which is used to obtain the current active track. |
| track | the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a [SliderState](/jetpack-compose/androidx.compose.material3/material3/classes/SliderState) which is used to obtain the current active track. |

## Code Examples
### VerticalCenteredSliderSample
```kotlin
@Preview
@Composable
fun VerticalCenteredSliderSample() {
    val coroutineScope = rememberCoroutineScope()
    val sliderState =
        rememberSliderState(
            // Only allow multiples of 10. Excluding the endpoints of `valueRange`,
            // there are 9 steps (10, 20, ..., 90).
            steps = 9,
            valueRange = -50f..50f,
        )
    val snapAnimationSpec = MaterialTheme.motionScheme.fastEffectsSpec<Float>()
    var currentValue by rememberSaveable { mutableFloatStateOf(sliderState.value) }
    var animateJob: Job? by remember { mutableStateOf(null) }
    sliderState.shouldAutoSnap = false
    sliderState.onValueChange = { newValue ->
        currentValue = newValue
        // only update the sliderState instantly if dragging
        if (sliderState.isDragging) {
            animateJob?.cancel()
            sliderState.value = newValue
        }
    }
    sliderState.onValueChangeFinished = {
        animateJob =
            coroutineScope.launch {
                animate(
                    initialValue = sliderState.value,
                    targetValue = currentValue,
                    animationSpec = snapAnimationSpec,
                ) { value, _ ->
                    sliderState.value = value
                }
            }
    }
    val interactionSource = remember { MutableInteractionSource() }
    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        Text(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            text = "%.2f".format(sliderState.value),
        )
        Spacer(Modifier.height(16.dp))
        VerticalSlider(
            state = sliderState,
            modifier =
                Modifier.height(300.dp)
                    .align(Alignment.CenterHorizontally)
                    .progressSemantics(
                        currentValue,
                        sliderState.valueRange.start..sliderState.valueRange.endInclusive,
                        sliderState.steps,
                    ),
            interactionSource = interactionSource,
            track = { SliderDefaults.CenteredTrack(sliderState = sliderState) },
            topToBottom = false,
        )
    }
}
```
### VerticalSliderSample
```kotlin
@Preview
@Composable
fun VerticalSliderSample() {
    val coroutineScope = rememberCoroutineScope()
    val sliderState =
        rememberSliderState(
            // Only allow multiples of 10. Excluding the endpoints of `valueRange`,
            // there are 9 steps (10, 20, ..., 90).
            steps = 9,
            valueRange = 0f..100f,
        )
    val snapAnimationSpec = MaterialTheme.motionScheme.fastEffectsSpec<Float>()
    var currentValue by rememberSaveable { mutableFloatStateOf(sliderState.value) }
    var animateJob: Job? by remember { mutableStateOf(null) }
    sliderState.shouldAutoSnap = false
    sliderState.onValueChange = { newValue ->
        currentValue = newValue
        // only update the sliderState instantly if dragging
        if (sliderState.isDragging) {
            animateJob?.cancel()
            sliderState.value = newValue
        }
    }
    sliderState.onValueChangeFinished = {
        animateJob =
            coroutineScope.launch {
                animate(
                    initialValue = sliderState.value,
                    targetValue = currentValue,
                    animationSpec = snapAnimationSpec,
                ) { value, _ ->
                    sliderState.value = value
                }
            }
    }
    val interactionSource = remember { MutableInteractionSource() }
    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        Text(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            text = "%.2f".format(sliderState.value),
        )
        Spacer(Modifier.height(16.dp))
        VerticalSlider(
            state = sliderState,
            modifier =
                Modifier.height(300.dp)
                    .align(Alignment.CenterHorizontally)
                    .progressSemantics(
                        currentValue,
                        sliderState.valueRange.start..sliderState.valueRange.endInclusive,
                        sliderState.steps,
                    ),
            interactionSource = interactionSource,
            track = {
                SliderDefaults.Track(
                    sliderState = sliderState,
                    modifier = Modifier.width(36.dp),
                    trackCornerSize = 12.dp,
                )
            },
            topToBottom = false,
        )
    }
}
```