How can I custom progress bar with button in jetpack compose?

Question

I am trying to do custom progress bar like this in jetpack compose.

When I slide the user button to the right and left, it will increase and decrease with values ​​of 0.25. The first value will be 0.25 and the last value will be 1, that is, it will consist of 4 stages.

here is what i did

@Composable
fun CustomProgressBar() {

    var progress by remember { mutableStateOf(0.25f) }


    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(16.dp)
                    .background(Color.LightGray)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(progress)
                        .height(16.dp)
                        .background(DefaultDYTColor)
                )
            }
            Button(
                onClick = {
                    if (progress < 1f) {
                        progress += 0.25f
                    }
                }
            ) {
                Text("increase")
            }
        }
        Text(
            text = "$progress",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

this is wrong but I want to share my code to explain what I did at least.

hear is my code result

Answer 1

You can use a Slider. With M3 (androidx.compose.material3.Slider) you can use the thumb attribute to apply a custom thumb.

Something like:

    var sliderPosition by remember { mutableStateOf(0f) }
    val interactionSource = MutableInteractionSource()

    Column {

        Slider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..1f,
            steps = 3,
            interactionSource = interactionSource,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
            },
            thumb = {
                val shape = RoundedCornerShape(4.dp)
                Box(
                    modifier = Modifier
                        .size(70.dp,25.dp)
                        .indication(
                            interactionSource = interactionSource,
                            indication = rememberRipple(
                                bounded = false,
                                radius = 20.dp
                            )
                        )
                        .hoverable(interactionSource = interactionSource)
                        .background(Blue200, shape),
                    contentAlignment = Alignment.Center
                ){
                    Text(sliderPosition.toString() +"Kg")
                }
            },
        )
    }