Custom Step slider in Jetpack Compose

What is ComposeStepSlider?

ComposeStepSlider is an open-source library designed to provide a customizable step slider component for Jetpack Compose applications. Whether you need a simple slider for setting preferences or a more complex step-based selection mechanism, ComposeStepSlider offers a versatile and easy-to-integrate solution.

Features

• Customizable Appearance: Easily modify the look and feel of the slider to match your app’s design.
• Step-Based Selection: Implement discrete steps for more precise user input.
• Smooth Animations: Enjoy smooth transitions and animations as users interact with the slider.
• Easy Integration: Seamlessly integrate ComposeStepSlider into your Jetpack Compose projects with minimal effort.

Getting Started

To start using ComposeStepSlider in your project, follow these simple steps:

Step 1: Add the Dependency

First, add the ComposeStepSlider dependency to your build.gradle file:

repositories {
    maven("https://jitpack.io")
}

dependencies {
    implementation("com.github.jongmin1217:ComposeStepSlider:<latest_version>")
}

Step 2: Implement the Slider

Next, you can implement the slider in your Compose UI code. Here’s a basic example to get you started:

@Composable
fun MyScreen() {
    var sliderValue by remember { mutableStateOf(0) }

    StepSlider(
        modifier = Modifier.padding(16.dp),
        value = sliderValue,
        color = StepSliderColor(
            activeTrackColor = ColorOrBrush.SingleColor(Color.Red), // using color
            inactiveTrackColor = ColorOrBrush.GradientBrush(Brush.horizontalGradient(listOf(Color.White,Color.Red))), // using brush
            // Add more color customization here
        ),
        textStyle = StepSliderTextStyle(
            activeTextColor = ColorOrBrush.SingleColor(Color.Red), // using color
            inactiveTextColor = ColorOrBrush.GradientBrush(Brush.horizontalGradient(listOf(Color.White,Color.Red))), // using brush
            // Add more text style customization here
        ),
        // Add more customization properties here
        onValueChange = { newValue ->
            sliderValue = newValue
        }
    )
}

Customization

ComposeStepSlider provides various customization options to tailor the slider to your specific needs. You can adjust colors, step indicators, and more to create a unique user experience.

For more information and documentation, please check github

GitHub - jongmin1217/ComposeStepSlider: Android jetpack compose step slider

ComposeStepSlider is an open-source project, and contributions are welcome! If you have ideas for new features, improvements, or bug fixes, feel free to open an issue or submit a pull request on GitHub.