<div class='type'>Composable Component</div>


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

<img loading='lazy' class='hero-img' alt='Sliders image' src='/static/images/material3/lqe2zb2b-1.png'>

<a id='references'></a>


<h2 id="slider-value-onvaluechange-modifier-enabled-valuerange-onvaluechangefinished-colors-interactionsource">Slider</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    @IntRange(from = 0) steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)
```


#### Parameters

| | |
| --- | --- |
| value | current value of the slider. If outside of `valueRange` provided, value will be coerced to this range. |
| onValueChange | callback in which value should be updated |
| modifier | the `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. |
| valueRange | range of values that this slider can take. The passed `value` will be coerced to this range. |
| steps | if positive, specifies the amount of discrete allowable values between the endpoints of `valueRange`. For example, a range from 0 to 10 with 4 `steps` allows 4 values evenly distributed between 0 and 10 (i.e., 2, 4, 6, 8). If `steps` is 0, the slider will behave continuously and allow any value from the range. Must not be negative. |
| 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. |
| colors | `SliderColors` that will be used to resolve the colors used for this slider in different states. See `SliderDefaults.colors`. |
| interactionSource | the `MutableInteractionSource` representing the stream of `Interaction`s for this slider. You can create and pass in your own `remember`ed instance to observe `Interaction`s and customize the appearance / behavior of this slider in different states. |


<hr class="docs-overload-divider">


<h2 id="slider-value-onvaluechange-modifier-enabled-onvaluechangefinished-colors-interactionsource-thumb-track-valuerange">Slider</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    @IntRange(from = 0) steps: Int = 0,
    thumb: @Composable (SliderState) -> Unit = {
        SliderDefaults.Thumb(
            interactionSource = interactionSource,
            colors = colors,
            enabled = enabled,
        )
    },
    track: @Composable (SliderState) -> Unit = { sliderState ->
        SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState)
    },
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
)
```


#### Parameters

| | |
| --- | --- |
| value | current value of the slider. If outside of `valueRange` provided, value will be coerced to this range. |
| onValueChange | callback in which value should be updated |
| modifier | the `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. |
| 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. |
| colors | `SliderColors` that will be used to resolve the colors used for this slider in different states. See `SliderDefaults.colors`. |
| interactionSource | the `MutableInteractionSource` representing the stream of `Interaction`s for this slider. You can create and pass in your own `remember`ed instance to observe `Interaction`s and customize the appearance / behavior of this slider in different states. |
| steps | if positive, specifies the amount of discrete allowable values between the endpoints of `valueRange`. For example, a range from 0 to 10 with 4 `steps` allows 4 values evenly distributed between 0 and 10 (i.e., 2, 4, 6, 8). If `steps` is 0, the slider will behave continuously and allow any value from the range. Must not be negative. |
| 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. |
| 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. |
| valueRange | range of values that this slider can take. The passed `value` will be coerced to this range. |


<hr class="docs-overload-divider">


<h2 id="slider-state-modifier-enabled-colors-interactionsource-thumb-track">Slider</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Slider(
    state: SliderState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    thumb: @Composable (SliderState) -> Unit = {
        SliderDefaults.Thumb(
            interactionSource = interactionSource,
            colors = colors,
            enabled = enabled,
        )
    },
    track: @Composable (SliderState) -> Unit = { sliderState ->
        SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState)
    },
)
```


#### Parameters

| | |
| --- | --- |
| state | `SliderState` which contains the slider's current value. |
| modifier | the `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. |
| colors | `SliderColors` that will be used to resolve the colors used for this slider in different states. See `SliderDefaults.colors`. |
| interactionSource | the `MutableInteractionSource` representing the stream of `Interaction`s for this slider. You can create and pass in your own `remember`ed instance to observe `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` 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` which is used to obtain the current active track. |