DOCSEARCHbyAlgolia
Submit Docs

Wavy Slider

repository·main·Indexed 42 days ago

https://github.com/mahozad/wavy-slider

A Compose Multiplatform library providing animated, wavy Material-style sliders and progress bars similar to Android 13 media controls. Supports Material 2 and Material 3 variants (WavySlider2 and WavySlider3) for Android, iOS, Desktop, and Web. Version 2.2.0 allows customization of wave length, height, velocity, and thickness.

Tokens
1.9K
Snippets
7
Records
7
Agent score
4%

What's inside Wavy Slider

  2. Convert APNG to GIF via command line

    main

    Use the apng2gif command-line tool to convert animated PNG (APNG) files into animated GIF format. The tool uses the Wu quantizer for true-color files to maintain quality.

    Basic Syntax: apng2gif <input_anim.png> [<output_anim.gif>] [options]

    apng2gif anim.png [anim.gif] [-t tlevel] [-b bcolor]

  3. Disable initial wave appearance animation

    main

    To disable the initial expansion/appearance animation when the component is composed, use the Compose snap() animation spec within the animationSpecs parameter. Ensure you import the correct SliderDefaults object for your Material version (M2 or M3).

    animationSpecs = SliderDefaults.WaveAnimationSpecs.copy(waveAppearanceAnimationSpec = snap())

  4. Setup for Multiplatform Projects

    main

    Depending on your target platforms, you can add the library to your common source set or to specific targets.

    Adding to commonMain

    If you target a subset of the library's supported platforms (Android, iOS, Desktop, Web), add it to your commonMain dependencies:

    kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("ir.mahozad.multiplatform:wavy-slider:2.2.0")
        }
    }
}

    Adding to specific targets

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

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

  5. Use WavySlider in Compose

    main

    The WavySlider works similarly to the standard Material Slider. You can use either the Material 3 version (WavySlider3) or the Material 2 version (WavySlider2) by adjusting your imports.

    Key Parameters

    • value: The current slider value.
    • onValueChange: Callback when the value changes.
    • waveLength: The length of the wave. Setting this to 0.dp results in a regular flat Slider.
    • waveHeight: The height of the wave. Setting this to 0.dp results in a regular flat Slider.
    • waveVelocity: A Pair<Dp, WaveDirection> representing speed per second and direction (HEAD or TAIL).
    • waveThickness: Thickness of the wave (defaults to 4.dp).
    • trackThickness: Thickness of the track (defaults to a value based on the Material variant).
    • incremental: Whether to gradually increase waveHeight.
    • animationSpecs: Customize various animations of the wave using WaveAnimationSpecs.
    import ir.mahozad.multiplatform.wavyslider.material3.WavySlider as WavySlider3
import ir.mahozad.multiplatform.wavyslider.material.WavySlider as WavySlider2
import ir.mahozad.multiplatform.wavyslider.WaveDirection.*

@Composable
fun MyComposable() {
    var fraction by remember { mutableStateOf(0.5f) }
    WavySlider3( // OR WavySlider2. See the imports above that use "as ..."
        value = fraction,
        onValueChange = { fraction = it },
        waveLength = 16.dp,     // Setting this to 0.dp results in a Slider
        waveHeight = 16.dp,     // Setting this to 0.dp results in a Slider
        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
        // Other options that are available in standard Material 2/3 Slider
    )
}

  6. Create a static wavy divider

    main

    To create a wavy divider that is fixed and non-animated, pass a custom track to the WavySlider and set waveVelocity to 0.dp. You should also use snap() for the animation specs to prevent any movement.

    WavySlider3(
    value = 1f,
    onValueChange = {},
    thumb = {},
    track = {
        SliderDefaults.Track(
            sliderState = it,
            enabled = false,
            colors = SliderDefaults.colors(disabledActiveTrackColor = Color.Magenta),
            thumbTrackGapSize = 0.dp,
            waveThickness = 1.dp,
            waveVelocity = 0.dp to HEAD,
            animationSpecs = WaveAnimationSpecs(
                waveAppearanceAnimationSpec = snap(),
                waveVelocityAnimationSpec = snap(),
                waveHeightAnimationSpec = snap()
            )
        )
    }
)

  7. Configure transparency and background color in apng2gif

    main

    You can control how transparency is handled during conversion using the -t and -b flags. Note that if you specify a background color with -b, the transparency threshold -t is ignored.

    Transparency Threshold (-t)

    Sets the alpha level threshold. Pixels with an alpha value less than this threshold will become fully transparent.

    • Default: 128
    • Example: -t 128

    Background Color (-b)

    Sets a solid background color that partially transparent pixels will be composed over. This effectively replaces transparency with a color.

    • Formats: RGB values (e.g., 255 0 0) or Hex strings (e.g., "#ff0000").
    • Example: -b 255 0 0 or -b "#ff0000"
    apng2gif anim.png [anim.gif] [-t tlevel] [-b bcolor]

Options:
-t 128
-b 255 0 0
-b "#ff0000"