Custom compose sliders

This package allows you to build highly customizable sliders and tracks for compose for Android

Add to your project

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency

implementation "com.github.krottv:compose-sliders:$compose_sliders_version"

Simple Usage

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
        )
    }
)

Advanced Usage

It allows to use custom composables for track and thumb. For detailed usage see sample/MainActivity

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)
)

About

The code is mainly based on Slider from compose material package with the abilities of additional customization. This project is inspired by swiftui-sliders. Currently we have only SliderValueHorizontal and in the future it is possible to add SliderValueVertical, SliderRangeHorizontal, SliderRangeVertical if there is a demand for it.

License