# VerticalSlider

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/VerticalSlider.composable#VerticalSlider(androidx.compose.material3.SliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onValueChangeFinished: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, topToBottom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource, thumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, track: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design slider](https://m3.material.io/components/sliders/overview) | Cmn |

## Functions

### VerticalSlider

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Slider.kt+function:VerticalSlider)

```
@Composable
fun VerticalSlider(
    state: SliderState,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onValueChangeFinished: (() -> Unit)? = null,
    topToBottom: Boolean = true,
    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,
        )
    }
): Unit
```

[Material Design slider](https://m3.material.io/components/sliders/overview)

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

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

![Vertical sliders
image](https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fm7lk1j0t-05.png?alt=media&token=3b884058-21ca-4d72-ba5e-5afdb59fa01e)

Vertical Slider:

```kotlin
import androidx.compose.animation.core.animate
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.progressSemantics
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalSlider
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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,
        trackRange = 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
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.trackRange.start..sliderState.trackRange.endInclusive,
                    sliderState.steps,
                ),
        onValueChange = { newValue ->
            currentValue = newValue
            // only update the sliderState instantly if dragging
            if (sliderState.isDragging) {
                animateJob?.cancel()
                sliderState.value = newValue
            }
        },
        onValueChangeFinished = {
            animateJob = coroutineScope.launch {
                animate(
                    initialValue = sliderState.value,
                    targetValue = currentValue,
                    animationSpec = snapAnimationSpec,
                ) { value, _ ->
                    sliderState.value = value
                }
            }
        },
        interactionSource = interactionSource,
        track = {
            SliderDefaults.Track(
                sliderState = sliderState,
                modifier = Modifier.width(36.dp),
                trackCornerSize = 12.dp,
            )
        },
        topToBottom = false,
    )
}
```

Vertical Slider with a centered track:

```kotlin
import androidx.compose.animation.core.animate
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.progressSemantics
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalSlider
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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,
        trackRange = -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
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.trackRange.start..sliderState.trackRange.endInclusive,
                    sliderState.steps,
                ),
        onValueChange = { newValue ->
            currentValue = newValue
            // only update the sliderState instantly if dragging
            if (sliderState.isDragging) {
                animateJob?.cancel()
                sliderState.value = newValue
            }
        },
        onValueChangeFinished = {
            animateJob = coroutineScope.launch {
                animate(
                    initialValue = sliderState.value,
                    targetValue = currentValue,
                    animationSpec = snapAnimationSpec,
                ) { value, _ ->
                    sliderState.value = value
                }
            }
        },
        interactionSource = interactionSource,
        track = { SliderDefaults.CenteredTrack(sliderState = sliderState) },
        topToBottom = false,
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState` which contains the slider's current value. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback in which value should be updated from the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#VerticalSlider(androidx.compose.material3.SliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)` (e.g. `state.value = it`) |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this slider |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | 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. |
| `onValueChangeFinished: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | called when value change has ended. This should not be used to update the slider value (use `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#VerticalSlider(androidx.compose.material3.SliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)` instead), but rather to know when the user has completed selecting a new value by ending a drag or a click. For keyboard movements, this is called on every step. |
| `topToBottom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the direction of this slider. When true (default), the slider progresses from top to bottom (top represents the minimum value and bottom represents the maximum value). When false, the slider progresses from bottom to top (bottom represents the minimum value and top represents the maximum value). |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderColors = SliderDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderColors` that will be used to resolve the colors used for this slider in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderDefaults#colors()`. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource = remember { MutableInteractionSource() }` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` representing the stream of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this slider. You can create and pass in your own `remember`ed instance to observe `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s and customize the appearance / behavior of this slider in different states. |
| `thumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { _ -> SliderDefaults.Thumb( interactionSource = interactionSource, isVertical = true, colors = colors, enabled = enabled, thumbSize = VerticalThumbSize, ) }` | the thumb to be displayed on the slider, it is placed on top of the track. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState` which is used to obtain the current active track. |
| `track: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { sliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, sliderState = sliderState, trackCornerSize = Dp.Unspecified, ) }` | the track to be displayed on the slider, it is placed underneath the thumb. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderState` which is used to obtain the current active track. |