var stateSlider2 by remember { mutableStateOf(0.5f) }
SliderValueHorizontal(
    stateSlider2, { stateSlider2 = it },
    modifier = Modifier
        .fillMaxWidth()
        .height(80.dp), steps = 10,
    thumbHeightMax = true,
    track = { modifier: Modifier,
                fraction: Float,
                interactionSource: MutableInteractionSource,
                tickFractions: List<Float>,
                enabled: Boolean ->

        DefaultTrack(
            modifier,
            fraction,
            interactionSource,
            tickFractions,
            enabled,
            height = 4.dp
        )
    },
    thumb = { modifier: Modifier,
                offset: Dp,
                interactionSource: MutableInteractionSource,
                enabled: Boolean,
                thumbSize: DpSize ->

        DefaultThumb(
            modifier, offset, interactionSource, enabled, thumbSize,
            color = Color.Blue,
            scaleOnPress = 1.3f
        )
    }
)

var stateSlider3 by remember { mutableStateOf(0.5f) }

SliderValueHorizontal(
    stateSlider3, { stateSlider3 = it },
    modifier = Modifier
        .fillMaxWidth(),
    thumbHeightMax = false,
    track = { modifier: Modifier,
                progress: Float,
                _, _, _ ->

        Box(
            Modifier.padding(vertical = 30.dp)
                .height(8.dp).then(modifier)
        ) {
            val bgTrack = Modifier.background(
                Color.Magenta.copy(alpha = 0.5f),
                RoundedCornerShape(100)
            )

            Spacer(bgTrack.fillMaxHeight().then(modifier))

            val bgProgress = Modifier.background(
                Brush.linearGradient(
                    listOf(
                        Color.Green,
                        Color.Red,
                        Color.Blue
                    )
                ),
                RoundedCornerShape(100)
            )

            Spacer(
                bgProgress.fillMaxHeight()
                    .fillMaxWidth(fraction = progress)
                    .then(modifier)
            )
        }
    }, thumb = { modifier, _: Dp,
                    mutableSource,
                    _, _ ->

        var isPressed by remember { mutableStateOf(false) }
        mutableSource.ListenOnPressed { isPressed = it }

        val color by animateColorAsState(
            if (isPressed) Color.Red else Color.Yellow,
            TweenSpec(durationMillis = 200)
        )

        Spacer(
            modifier.background(color)
                .border(1.dp, Color.Red)
        )

    },
    thumbSizeInDp = DpSize(60.dp, 30.dp)
)