Label

Functions summary

Unit
@ExperimentalMaterial3Api
@Composable
Label(
    label: @Composable TooltipScope.() -> Unit,
    modifier: Modifier,
    interactionSource: MutableInteractionSource?,
    isPersistent: Boolean,
    content: @Composable () -> Unit
)

Label component that will append a label to content.
Cmn

Functions

Label

Cmn 
@ExperimentalMaterial3Api
@Composable
fun Label(
    label: @Composable TooltipScope.() -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource? = null,
    isPersistent: Boolean = false,
    content: @Composable () -> Unit
): Unit

Label component that will append a label to content. The positioning logic uses TooltipDefaults.rememberTooltipPositionProvider.

Label appended to thumbs of Slider:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

var sliderPosition by rememberSaveable { mutableStateOf(0f) }
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        thumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(sliderPosition))
                    }
                },
                interactionSource = interactionSource,
            ) {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    contentDescription = null,
                    modifier = Modifier.size(ButtonDefaults.IconSize),
                    tint = Color.Red,
                )
            }
        },
    )
}

Label appended to thumbs of RangeSlider:

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,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
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,
        startInteractionSource = startInteractionSource,
        endInteractionSource = endInteractionSource,
        startThumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(rangeSliderState.activeRangeStart))
                    }
                },
                interactionSource = startInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors,
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier.requiredSize(45.dp, 25.dp).wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeEnd))
                    }
                },
                interactionSource = endInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors,
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState,
            )
        },
    )
}
Parameters
label: @Composable TooltipScope.() -> Unit

composable that will be appended to content
modifier: Modifier = Modifier

Modifier that will be applied to content
interactionSource: MutableInteractionSource? = null

the MutableInteractionSource representing the stream of Interactions for the content.
isPersistent: Boolean = false

boolean to determine if the label should be persistent. If true, then the label will always show and be anchored to content. if false, then the label will only show when pressing down or hovering over the content.
content: @Composable () -> Unit

the composable that label will anchor to.