Wavy slider

This is an animated Material wavy slider and progress bar similar to the one introduced in Android 13 media player. It has curly, wobbly, squiggly, wiggly, jiggly, wriggly, dancing movements. Some users call it the sperm.

The library can be used in Compose Multiplatform projects like a regular Material Slider. Supported target platforms are Android, Desktop, and JavaScript.

It can also be used in a regular single-platform Android project using Jetpack Compose or (possibly) XML views.

Getting started

For a single-platform project (Android or Desktop or JS):

dependencies {
    implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:0.0.1")
}

For a multiplatform project (if you target a subset of the library supported platforms):

kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:0.0.1")
            }
        }
// ...

If your app includes targets that are not supported by the library, add the library separately to each supported target:

kotlin {
    val desktopMain by getting {
        dependencies {
            implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:0.0.1")
        }
    }
    val androidMain by getting {
        dependencies {
            implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:0.0.1")
        }
    }
    // etc.

Using the wavy slider is much like using the Material Slider (set waveHeight to 0.dp to turn it into a flat slider):

@Composable
fun MyComposable() {
    var fraction by remember { mutableStateOf(0.5f) }
    WavySlider(
        value = fraction,
        waveLength = 16.dp,    // Defaults to a dp based on platform
        waveHeight = 16.dp,    // Set this to 0.dp to get a regular Slider
        shouldFlatten = false, // Defaults to false
        waveThickness = 4.dp,  // Defaults to the track thickness
        trackThickness = 4.dp, // Defaults to a dp based on platform
        animationDirection = UNSPECIFIED, // Defaults to UNSPECIFIED
        onValueChange = { fraction = it }
    )
}

Demo in real world applications

See the showcase directory for example apps in various platforms using the library.

GitHub

View Github