CustomSliderUsage.kt

var sliderValue by remember { mutableFloatStateOf(0f) }

CustomSlider(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 20.dp),
    value = sliderValue,
    onValueChange = {
        sliderValue = it
    },
    valueRange = 0f..50f,
    gap = 10,
    showIndicator = true,
    thumb = { thumbValue ->
        CustomSliderDefaults.Thumb(
            thumbValue = "$thumbValue%",
            color = Color.Transparent,
            size = 40.dp,
            modifier = Modifier.background(
                brush = Brush.linearGradient(listOf(Color.Cyan, Color.Blue)),
                shape = CircleShape
            )
        )
    },
    track = { sliderPositions ->
        Box(
            modifier = Modifier
                .track()
                .border(
                    width = 1.dp,
                    color = Color.LightGray.copy(alpha = 0.4f),
                    shape = CircleShape
                )
                .background(Color.White)
                .padding(3.5.dp),
            contentAlignment = Alignment.CenterStart
        ) {
            Box(
                modifier = Modifier
                    .progress(sliderPositions = sliderPositions)
                    .background(
                        brush = Brush.linearGradient(listOf(Color.Red, Color.Magenta))
                    )
            )
        }
    }
)