CODEWITHSUNDEEP
android-jetpack-composeandroid-jetpack-compose-uimaterial-design-3
d-feverx
d-feverx

Reputation: 1672

How to increase the track height of a slider in material design 3

@Composable
fun SliderWithCustomTrackAndThumb() {
    var sliderPosition by remember { mutableStateOf(0f) }
    val interactionSource = MutableInteractionSource()
    val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
    Column {
        Text(text = sliderPosition.toString())
        Slider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
            interactionSource = interactionSource,
            thumb = {
                SliderDefaults.Thumb(
                    interactionSource = interactionSource,
                    colors = colors
                )
            },
            track = { sliderPositions ->
                SliderDefaults.Track(
                    colors = colors,
                    sliderPositions = sliderPositions
                )
            }
        )
    }
}

The above composable function creates a sample slider with a custom thumb size. I want to increase the size of the track. how can I do that?

Upvotes: 2

Views: 4237

Answers (4)

Maks
Maks

Reputation: 1

@Composable
fun BWSlider(
    value: Float,
    onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int,
    onValueChangeFinished: (() -> Unit)? = null,
) {

    Slider(
        value = value,
        onValueChange = { newValue ->
            val processedValue = kotlin.math.min(newValue, valueRange.endInclusive)
            onValueChange(processedValue)
        },
        valueRange = valueRange,
        steps = steps,
        onValueChangeFinished = onValueChangeFinished,
        colors = SliderDefaults.colors(
            activeTrackColor = Color.Transparent,
            inactiveTrackColor = Color.Transparent,
            inactiveTickColor = Color.Transparent,
            activeTickColor = Color.Transparent
        ),
        track = { sliderState ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(4.dp)
                    .clip(RoundedCornerShape(8.dp))
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(4.dp)
                        .background(colorResource(R.color.grey))
                )
                Box(
                    modifier = Modifier
                        .fillMaxWidth(sliderState.value / valueRange.endInclusive)
                        .height(4.dp)
                        .background(colorResource(R.color.primary))
                )
            }
        },
        thumb = {
            Thumb(
                modifier = Modifier
                    .size(24.dp)
                    .background(Color.White, shape = CircleShape),
                interactionSource = remember { MutableInteractionSource() },
                colors = SliderDefaults.colors(thumbColor = Color.White)
            )
        },
    )

Upvotes: 0

Agustin Sivopl&#225;s
Agustin Sivopl&#225;s

Reputation: 23

You can use the modifier attribute and set a custom height:

track = { sliderState ->
            SliderDefaults.Track(
                modifier = Modifier.height(4.dp),
                sliderState = sliderState,
                drawStopIndicator = null,
                thumbTrackGapSize = 0.dp,
                colors = sliderColors
            )
        }

Upvotes: 2

Mirhack
Mirhack

Reputation: 121

You can increase or decrease the size of the track and thumb using scale modifiers. This is how I do it:

@Composable
private fun Slider() {
    val interactionSource = remember { MutableInteractionSource() }
    Slider(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        value = 0.5f,
        interactionSource = interactionSource,
        onValueChange = { value: Float -> },
        valueRange = 0f..1f,
        track = { sliderPositions ->
            SliderDefaults.Track(
                modifier = Modifier.scale(scaleX = 1f, scaleY = 0.5f),
                sliderPositions = sliderPositions
            )
        },
        thumb = {
            SliderDefaults.Thumb(
                modifier = Modifier.scale(scaleX = 0.5f, scaleY = 0.5f),
                interactionSource = interactionSource,
            )
        }
    )
}

screenshot

Upvotes: 8

Jack
Jack

Reputation: 237

while you can't change the size size of the track set in the SlideDefaults.Track()component, you can always provide your own track implementation by copying the code from the SliderDefaults and change the track size there.

Upvotes: 2

Related Questions