# InlineSlider ## 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/material/InlineSlider.composable#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)( 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, 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, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSlider.composable#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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/material/InlineSlider.composable#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)( 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, 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, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, 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, segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSlider.composable#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` allows users to make a selection from a range of values. | ## Functions ### InlineSlider Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Slider.kt+function:InlineSlider) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.0.0) ``` @Composable fun InlineSlider(     value: Int,     onValueChange: (Int) -> Unit,     valueProgression: IntProgression,     decreaseIcon: @Composable () -> Unit,     increaseIcon: @Composable () -> Unit,     modifier: Modifier = Modifier,     enabled: Boolean = true,     segmented: Boolean = valueProgression.stepsNumber() <= 8,     colors: InlineSliderColors = InlineSliderDefaults.colors() ): Unit ``` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSlider.composable#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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. InlineSlider 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/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)`. The bar in the middle of control can have separators if `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` flag is set to true. A number of steps is calculated as the difference between max and min values of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)`.step - 1. For example, with a range of 100..120 and a step 5, 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/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` range is not equally divisible by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)`.step, then `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)`.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.material.Icon import androidx.wear.compose.material.InlineSlider import androidx.wear.compose.material.InlineSliderDefaults var value by remember { mutableStateOf(4) } InlineSlider( value = value, onValueChange = { value = it }, increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") }, decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") }, valueProgression = 0..10, segmented = false, ) ``` A segmented slider sample: ```kotlin import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.wear.compose.material.Icon import androidx.wear.compose.material.InlineSlider import androidx.wear.compose.material.InlineSliderDefaults var value by remember { mutableStateOf(2f) } InlineSlider( value = value, onValueChange = { value = it }, increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") }, decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") }, valueRange = 1f..4f, steps = 7, segmented = true, ) ``` | 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/material/package-summary#InlineSlider(kotlin.Int,kotlin.Function1,kotlin.ranges.IntProgression,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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 | | `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the decrease (start) button | | `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the increase (end) button | | `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Slider layout | | `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() <= 8` | 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 8 steps as it might affect user experience. By default true if number of steps is \<=8. | | `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors = InlineSliderDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors` that will be used to resolve the background and content color for this slider in different states | ### InlineSlider Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/Slider.kt+function:InlineSlider) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.0.0) ``` @Composable fun InlineSlider(     value: Float,     onValueChange: (Float) -> Unit,     steps: Int,     decreaseIcon: @Composable () -> Unit,     increaseIcon: @Composable () -> Unit,     modifier: Modifier = Modifier,     enabled: Boolean = true,     valueRange: ClosedFloatingPointRange = 0f..(steps + 1).toFloat(),     segmented: Boolean = steps <= 8,     colors: InlineSliderColors = InlineSliderDefaults.colors() ): Unit ``` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSlider.composable#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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. InlineSlider 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/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)`. The bar in the middle of control can have separators if `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` divided by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` + 1 value. A continuous non-segmented slider sample: ```kotlin import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.wear.compose.material.Icon import androidx.wear.compose.material.InlineSlider import androidx.wear.compose.material.InlineSliderDefaults var value by remember { mutableStateOf(4.5f) } InlineSlider( value = value, onValueChange = { value = it }, increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") }, decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") }, valueRange = 3f..6f, steps = 5, segmented = false, ) ``` A segmented slider sample: ```kotlin import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.wear.compose.material.Icon import androidx.wear.compose.material.InlineSlider import androidx.wear.compose.material.InlineSliderDefaults var value by remember { mutableStateOf(2f) } InlineSlider( value = value, onValueChange = { value = it }, increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") }, decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") }, valueRange = 1f..4f, steps = 7, segmented = true, ) ``` | 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/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` 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://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 | | `decreaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the decrease (start) button | | `increaseIcon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for an icon which is placed on the increase (end) button | | `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifiers for the Slider layout | | `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 = 0f..(steps + 1).toFloat()` | Range of values that Slider value can take. Passed `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` will be coerced to this range | | `segmented: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = steps <= 8` | 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 8 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` as it might affect user experience. By default true if number of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#InlineSlider(kotlin.Float,kotlin.Function1,kotlin.Int,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Boolean,androidx.wear.compose.material.InlineSliderColors)` is \<=8. | | `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors = InlineSliderDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/InlineSliderColors` that will be used to resolve the background and content color for this slider in different states |