# RangeSlider

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 [RangeSlider](https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors))( value: 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>, onValueChange: (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>) -> 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<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/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, onValueChangeFinished: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderColors )` **This function is deprecated.** Use the RangeSlider overload that accepts RangeSliderState, onValueChange, and onValueChangeFinished instead. | Cmn |
| `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/RangeSlider.composable#RangeSlider(androidx.compose.material3.RangeSliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1,kotlin.Function1)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState, onValueChange: (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>) -> 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)?, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderColors, startThumbInteractionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource, endThumbInteractionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource, startThumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, endThumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState) -> 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/RangeSliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design range slider](https://m3.material.io/components/sliders/overview) | Cmn |

## Functions

### RangeSlider

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:RangeSlider)

```
@Composable
fun [RangeSlider](https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors))(
    value: ClosedFloatingPointRange<Float>,
    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: @IntRange(from = 0) Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors()
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use the RangeSlider overload that accepts RangeSliderState, onValueChange, and onValueChangeFinished instead, use this instead:
>
> ```kotlin
> RangeSlider(state = rememberRangeSliderState(value.start, value.endInclusive, steps, trackRange = valueRange), onValueChange = onValueChange, modifier = modifier, enabled = enabled, onValueChangeFinished = onValueChangeFinished, colors = colors)
> ```

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

Range Sliders expand upon `https://developer.android.com/reference/kotlin/androidx/compose/material3/Slider.composable#Slider(kotlin.Float,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource)` using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

Use continuous Range Sliders to allow users to make meaningful selections that don't require specific values:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val rangeSliderState = rememberRangeSliderState(0f, 100f, trackRange = 0f..100f)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(rangeSliderState.startValue)
    val rangeEnd = "%.2f".format(rangeSliderState.endValue)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
}
```

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val rangeSliderState =
    rememberRangeSliderState(
        0f,
        100f,
        trackRange = 0f..100f,
        // Only allow multiples of 10. Excluding the endpoints of `valueRange`,
        // there are 9 steps (10, 20, ..., 90).
        steps = 9,
    )
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = rangeSliderState.startValue.roundToInt()
    val rangeEnd = rangeSliderState.endValue.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
}
```

| Parameters |
|---|---|
| `value: 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>` | current values of the RangeSlider. If either value is outside of `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)` provided, it will be coerced to this range. |
| `onValueChange: (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>) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | lambda in which values should be updated |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifiers for the Range Slider layout |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not component is enabled and can we interacted with or not |
| `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..1f` | range of values that Range Slider values can take. Passed `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)` will be coerced to this range |
| `steps: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | if positive, specifies the amount of discrete allowable values between the endpoints of `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)`. For example, a range from 0 to 10 with 4 `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)` allows 4 values evenly distributed between 0 and 10 (i.e., 2, 4, 6, 8). If `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)` is 0, the slider will behave continuously and allow any value from the range. Must not be negative. |
| `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 range slider value (use `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)` 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. |
| `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 determine the color of the Range Slider parts in different state. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderDefaults#colors()` to customize. |

### RangeSlider

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:RangeSlider)

```
@Composable
fun RangeSlider(
    state: RangeSliderState,
    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    startThumbInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    endThumbInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    startThumb: @Composable (RangeSliderState) -> Unit = {
        SliderDefaults.Thumb(
            interactionSource = startThumbInteractionSource,
            colors = colors,
            enabled = enabled,
        )
    },
    endThumb: @Composable (RangeSliderState) -> Unit = {
        SliderDefaults.Thumb(
            interactionSource = endThumbInteractionSource,
            colors = colors,
            enabled = enabled,
        )
    },
    track: @Composable (RangeSliderState) -> Unit = { rangeSliderState ->
        SliderDefaults.Track(
            colors = colors,
            enabled = enabled,
            rangeSliderState = rangeSliderState,
        )
    }
): Unit
```

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

Range Sliders expand upon `https://developer.android.com/reference/kotlin/androidx/compose/material3/Slider.composable#Slider(kotlin.Float,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource)` using the same concepts but allow the user to select 2 values.

The two values are still bounded by the value range but they also cannot cross each other.

It uses the provided startThumb for the slider's start thumb and endThumb for the slider's end thumb. It also uses the provided track for the slider's track. If nothing is passed for these parameters, it will use `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderDefaults#Thumb(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.Modifier,androidx.compose.material3.SliderColors,kotlin.Boolean,androidx.compose.ui.unit.DpSize)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderDefaults#Track(androidx.compose.material3.SliderPositions,androidx.compose.ui.Modifier,androidx.compose.material3.SliderColors,kotlin.Boolean)` for the thumbs and track.

Use continuous Range Sliders to allow users to make meaningful selections that don't require specific values:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val rangeSliderState = rememberRangeSliderState(0f, 100f, trackRange = 0f..100f)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = "%.2f".format(rangeSliderState.startValue)
    val rangeEnd = "%.2f".format(rangeSliderState.endValue)
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
}
```

You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val rangeSliderState =
    rememberRangeSliderState(
        0f,
        100f,
        trackRange = 0f..100f,
        // Only allow multiples of 10. Excluding the endpoints of `valueRange`,
        // there are 9 steps (10, 20, ..., 90).
        steps = 9,
    )
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    val rangeStart = rangeSliderState.startValue.roundToInt()
    val rangeEnd = rangeSliderState.endValue.roundToInt()
    Text(text = "$rangeStart .. $rangeEnd")
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
}
```

A custom start/end thumb and track can be provided:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val rangeSliderState = rememberRangeSliderState(0f, 100f, trackRange = 0f..100f)
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }
val startThumbAndTrackColors =
    SliderDefaults.colors(thumbColor = Color.Blue, activeTrackColor = Color.Red)
val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        startThumbInteractionSource = startInteractionSource,
        endThumbInteractionSource = endInteractionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        startThumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(rangeSliderState.startValue))
                    }
                },
                interactionSource = startInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors,
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier.requiredSize(45.dp, 25.dp).wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.endValue))
                    }
                },
                interactionSource = endInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors,
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState,
            )
        },
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState` which contains the current values of the RangeSlider. |
| `onValueChange: (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>) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback in which values should be updated from the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(androidx.compose.material3.RangeSliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1,kotlin.Function1)` (e.g. `state.startValue = it.start` and `state.endValue = it.endInclusive`) |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifiers for the Range Slider layout |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not component is enabled and can we interacted with or not |
| `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 range slider value (use `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(androidx.compose.material3.RangeSliderState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,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. |
| `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 determine the color of the Range Slider parts in different state. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SliderDefaults#colors()` to customize. |
| `startThumbInteractionSource: 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 the start thumb. You can create and pass in your own `remember`ed instance to observe. |
| `endThumbInteractionSource: 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 the end thumb. You can create and pass in your own `remember`ed instance to observe. |
| `startThumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.Thumb( interactionSource = startThumbInteractionSource, colors = colors, enabled = enabled, ) }` | the start thumb to be displayed on the Range Slider. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState` which is used to obtain the current active track. |
| `endThumb: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { SliderDefaults.Thumb( interactionSource = endThumbInteractionSource, colors = colors, enabled = enabled, ) }` | the end thumb to be displayed on the Range Slider. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState` 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/RangeSliderState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { rangeSliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, rangeSliderState = rangeSliderState, ) }` | the track to be displayed on the range slider, it is placed underneath the thumb. The lambda receives a `https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState` which is used to obtain the current active track. |