# Slider

## 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/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 2) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)` allows users to make a selection from a range of integer values from 1 to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)`. |
| `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/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, valueProgression: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-progression/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors, showMinimumSegment: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` allows users to make a selection from a range of values. |
| `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/wear/compose/material3/Slider.composable#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)( value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors, showMinimumSegment: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` allows users to make a selection from a range of values. |

## Functions

### Slider

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

```
@Composable
fun Slider(
    value: Int,
    onValueChange: (Int) -> Unit,
    steps: @IntRange(from = 2) Int,
    modifier: Modifier = Modifier,
    decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() },
    increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() },
    enabled: Boolean = true,
    segmented: Boolean = steps <= MaxSegmentSteps,
    shape: Shape = SliderDefaults.shape,
    colors: SliderColors = SliderDefaults.sliderColors()
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)` allows users to make a selection from a range of integer values from 1 to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)`.

This overload always shows at least one segment when enabled, representing the minimum value (1), up to and including `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)` segments for the maximum value.

For finer-grained control over the value range or where the minimum segments shown is zero, see other overloads.

A segmented slider sample with discrete integer steps:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(2) }
Slider(
    value = value,
    onValueChange = { value = it },
    steps = 4,
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Current value of the Slider. If outside of 1..`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)`, value will be coerced to this range. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda in which value should be updated. |
| `steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 2) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Specifies the number of discrete values evenly distributed across 1..`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)`. Must be \>= 2. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Slider layout. |
| `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.DecreaseIcon() }` | A slot for an icon which is placed on the decrease (start) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#DecreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.IncreaseIcon() }` | A slot for an icon which is placed on the increase (end) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#IncreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the slider. When `false`, this slider will not be clickable. |
| `segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = steps <= MaxSegmentSteps` | A boolean value which specifies whether a bar will be split into segments or not. By default true if `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors)` is \<= `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#MaxSegmentSteps()`. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SliderDefaults.shape` | Defines slider's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors = SliderDefaults.sliderColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors` that will be used to resolve the background and content color for this slider in different states. |

### Slider

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

```
@Composable
fun Slider(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() },
    increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() },
    enabled: Boolean = true,
    segmented: Boolean = valueProgression.stepsNumber() <= MaxSegmentSteps,
    shape: Shape = SliderDefaults.shape,
    colors: SliderColors = SliderDefaults.sliderColors(),
    showMinimumSegment: Boolean = false
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` allows users to make a selection from a range of values. The range of selections is shown as a bar between the minimum and maximum values of the range, from which users may select a single value. Slider is ideal for adjusting settings such as volume or brightness.

Value can be increased and decreased by clicking on the increase and decrease buttons, located accordingly to the start and end of the control. Buttons can have custom icons - `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)`.

The bar in the middle of control can have separators if `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` flag is set to true. The number of steps is calculated as the difference between max and min values of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)`.step - 1. For example, with a range of 100..120 and a step of 5, the number of steps will be (120-100)/ 5 - 1 = 3. Steps are 100(first), 105, 110, 115, 120(last)

If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` range is not equally divisible by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)`.step, then `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)`.last will be adjusted to the closest divisible value in the range. For example, 1..13 range and a step = 5, steps will be 1(first) , 6 , 11(last)

A continuous non-segmented slider sample:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(4) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueProgression = 0..10,
    segmented = false,
)
```

![SliderWithIntegerSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SliderWithIntegerSample_CompositeImage.png)

A segmented slider sample:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(2f) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueRange = 1f..4f,
    steps = 2,
    segmented = true,
)
```

![SliderSegmentedSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SliderSegmentedSample_CompositeImage.png)

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Current value of the Slider. If outside of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` provided, value will be coerced to this range. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda in which value should be updated. |
| `valueProgression: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-int-progression/index.html` | Progression of values that Slider value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Slider layout. |
| `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.DecreaseIcon() }` | A slot for an icon which is placed on the decrease (start) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#DecreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.IncreaseIcon() }` | A slot for an icon which is placed on the increase (end) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#IncreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the slider. When `false`, this slider will not be clickable. |
| `segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = valueProgression.stepsNumber() <= MaxSegmentSteps` | A boolean value which specifies whether a bar will be split into segments or not. Recommendation is while using this flag do not have more than `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#MaxSegmentSteps()` steps as it might affect user experience. By default true if number of steps is \<= `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#MaxSegmentSteps()`. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SliderDefaults.shape` | Defines slider's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors = SliderDefaults.sliderColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors` that will be used to resolve the background and content color for this slider in different states. |
| `showMinimumSegment: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | When `true`, shows at least one segment even when on the lowest value. |

### Slider

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

```
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: @IntRange(from = 0) Int,
    modifier: Modifier = Modifier,
    decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() },
    increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() },
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    segmented: Boolean = steps <= MaxSegmentSteps,
    shape: Shape = SliderDefaults.shape,
    colors: SliderColors = SliderDefaults.sliderColors(),
    showMinimumSegment: Boolean = false
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Slider.composable#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` allows users to make a selection from a range of values. The range of selections is shown as a bar between the minimum and maximum values of the range, from which users may select a single value. Slider is ideal for adjusting settings such as volume or brightness.

Value can be increased and decreased by clicking on the increase and decrease buttons, located accordingly to the start and end of the control. Buttons can have custom icons - `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)`.

The bar in the middle of control can have separators if `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` flag is set to true. A single step value is calculated as the difference between min and max values of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` + 1 value.

A continuous non-segmented slider sample:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(4.5f) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueRange = 3f..6f,
    steps = 5,
    segmented = false,
)
```

![SliderSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SliderSample_CompositeImage.png)

A segmented slider sample:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(2f) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueRange = 1f..4f,
    steps = 2,
    segmented = true,
)
```

![SliderSegmentedSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SliderSegmentedSample_CompositeImage.png)

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | Current value of the Slider. If outside of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` provided, value will be coerced to this range. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Lambda in which value should be updated. |
| `steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, slider will have only min and max values and no steps in between. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Slider layout. |
| `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.DecreaseIcon() }` | A slot for an icon which is placed on the decrease (start) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#DecreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.IncreaseIcon() }` | A slot for an icon which is placed on the increase (end) button such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#IncreaseIcon(androidx.compose.ui.Modifier,kotlin.String)`. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the slider. When `false`, this slider will not be clickable. |
| `valueRange: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.ranges/-closed-floating-point-range/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html> = 0f..(steps + 1).toFloat()` | Range of values that Slider value can take. Passed `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` will be coerced to this range. |
| `segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = steps <= MaxSegmentSteps` | A boolean value which specifies whether a bar will be split into segments or not. Recommendation is while using this flag do not have more than `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#MaxSegmentSteps()` steps as it might affect user experience. By default true if number of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,kotlin.Int,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SliderColors,kotlin.Boolean)` is \<= `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderDefaults#MaxSegmentSteps()`. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SliderDefaults.shape` | Defines slider's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors = SliderDefaults.sliderColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SliderColors` that will be used to resolve the background and content color for this slider in different states. |
| `showMinimumSegment: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | When `true`, shows at least one segment even when on the lowest value. |