Nothing Special   »   [go: up one dir, main page]
Skip to content

Latest commit

 

History

History
122 lines (102 loc) · 8.75 KB

README.md

File metadata and controls

122 lines (102 loc) · 8.75 KB
Raw

Kotlin version Compose Multiplatform version Latest Maven Central release


Real-world demo

Wavy slider

Animated Material wavy slider and progress/seek bar similar to the one used in Android 13 media controls.
It has curly, wobbly, squiggly, wiggly, jiggly, wriggly, dancing movements. Some users call it the sperm.

The library can be used in Jetpack Compose and Compose Multiplatform projects like a regular Material Slider.
Supported target platforms are Android, iOS, Desktop (JVM), and JavaScript (Kotlin/JS and Kotlin/Wasm).

Demo

For a live, interactive Web demo go to https://mahozad.ir/wavy-slider.
For real-world apps in various platforms using the library, see the showcase directory.

Usage

implementation("ir.mahozad.multiplatform:wavy-slider:2.0.0")
Setup for multiplatform projects

If you target a subset of the library supported platforms, add the library to your common source set:

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

If you have targets that are not supported by the library, add the library separately to each supported target:

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

Using the WavySlider is much like using the Material Slider (you can even make it a regular flat Slider):

import ir.mahozad.multiplatform.wavyslider.material/*OR material3*/.WavySlider
import ir.mahozad.multiplatform.wavyslider.WaveDirection.*

@Composable
fun MyComposable() {
    var fraction by remember { mutableStateOf(0.5f) }
    WavySlider(
        value = fraction,
        onValueChange = { fraction = it },
        waveLength = 16.dp,     // Set this to 0.dp to make the Slider flat
        waveHeight = 16.dp,     // Set this to 0.dp to make the Slider flat
        waveVelocity = 15.dp to HEAD, // Speed per second and its direction
        waveThickness = 4.dp,   // Defaults to 4.dp irregardless of variant
        trackThickness = 4.dp,  // Defaults to a thickness based on variant
        incremental = false,    // Whether to gradually increase waveHeight
        // animationSpecs = ... // Customize various animations of the wave
    )
}

Related