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.

Getting started

implementation("ir.mahozad.multiplatform:wavy-slider:1.3.0")

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

kotlin {
    val desktopMain /* OR jvmMain */ by getting {
        dependencies {
            implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:1.3.0")
            // ...
        }
    }
    androidMain.dependencies {
        implementation/* OR api */("ir.mahozad.multiplatform:wavy-slider:1.3.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 get a regular Slider
        waveHeight = 16.dp,     // Set this to 0.dp to get a regular Slider
        waveVelocity = 15.dp to HEAD, // Speed per second and its direction
        waveThickness = 4.dp,   // Defaults to the specified trackThickness
        trackThickness = 4.dp,  // Defaults to 4.dp, same as regular Slider
        incremental = false,    // Whether to gradually increase waveHeight
        // animationSpecs = ... // Customize various animations of the wave
    )
}

Related

• Android native squiggly progress: Main branch ❖ Android 14 ❖ Android 13
• Squiggly slider (Android-only): https://github.com/saket/squiggly-slider
• Wave slider (Android-only): https://github.com/galaxygoldfish/waveslider
• Squiggly seekbar (Flutter): https://github.com/hannesgith/squiggly_slider
• Sliders with custom styles: https://github.com/krottv/compose-sliders
• Customizable seeker/slider: https://github.com/2307vivek/Seeker
• Squiggly text underlines: https://github.com/saket/ExtendedSpans
• Waveform seekbar: https://github.com/massoudss/waveformSeekBar
• Colorful sliders: https://github.com/SmartToolFactory/Compose-Colorful-Sliders
• StackOverflow posts:
  • How to create the Android 13 squiggly slider using Jetpack Compose?
  • Implement new slider in Android 13 media player via Jetpack Compose
  • Wave like seek bar for music player app in android jetpack compose
  • Squiggly Seekbar with Animation in Flutter
  • Is it possible to make a squiggly line?