{"id":13537818,"url":"https://github.com/mahozad/wavy-slider","last_synced_at":"2025-10-29T05:32:09.811Z","repository":{"id":180123576,"uuid":"662135204","full_name":"mahozad/wavy-slider","owner":"mahozad","description":"Multiplatform wavy slider/progress bar similar to the one in Android 13","archived":false,"fork":false,"pushed_at":"2024-08-02T06:43:07.000Z","size":7926,"stargazers_count":147,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-02T09:29:08.181Z","etag":null,"topics":["android","compose-multiplatform","jetpack","jetpack-compose","kotlin","kotlin-multiplatform","kotlin-multiplatform-sample","material","material-design","material-you","material3","progress-bar","sine-wave","slider","wavy-slider"],"latest_commit_sha":null,"homepage":"https://mahozad.ir/wavy-slider","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mahozad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-04T12:35:02.000Z","updated_at":"2024-08-02T06:43:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"a65d05a9-22be-433b-9539-e4af2b46da09","html_url":"https://github.com/mahozad/wavy-slider","commit_stats":null,"previous_names":["mahozad/wavy-slider"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Fwavy-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Fwavy-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Fwavy-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Fwavy-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mahozad","download_url":"https://codeload.github.com/mahozad/wavy-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238777982,"owners_count":19528818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose-multiplatform","jetpack","jetpack-compose","kotlin","kotlin-multiplatform","kotlin-multiplatform-sample","material","material-design","material-you","material3","progress-bar","sine-wave","slider","wavy-slider"],"created_at":"2024-08-01T09:01:04.023Z","updated_at":"2025-10-29T05:32:09.803Z","avatar_url":"https://github.com/mahozad.png","language":"Kotlin","funding_links":[],"categories":["Libraries","Uncategorized"],"sub_categories":["🍎 Compose UI","Uncategorized"],"readme":"[![Kotlin badge]][Kotlin release]\n[![Compose Multiplatform badge]][Compose Multiplatform release]\n[![Maven Central badge]][Library Maven Central release]\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"asset/demo-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"asset/demo-light.png\"\u003e\n    \u003cimg alt=\"Real-world demo\" src=\"asset/demo-light.png\"\u003e\n  \u003c/picture\u003e\n\u003c/div\u003e\n\n# Wavy slider\n\nAnimated wavy [Material Slider][Material Slider] and progress/seek bar similar to the one used in [**Android 13** media controls][Android 13 media controls].  \nIt has curly, wobbly, squiggly, wiggly, jiggly, wriggly, dancing movements.\nSome users call it the **sperm**.\n\nThe library can be used in [Jetpack Compose][Jetpack Compose] and [Compose Multiplatform][Compose Multiplatform] projects like\na regular Material Slider.  \nSupported target platforms are Android, iOS, Desktop (JVM), and JavaScript (Kotlin/JS and Kotlin/Wasm).\n\n## Demo\n\nFor a live, interactive Web demo go to https://mahozad.ir/wavy-slider.  \nFor real-world apps in various platforms using the library, see the [showcase](showcase) directory.\n\n## Usage\n\n```kotlin\nimplementation(\"ir.mahozad.multiplatform:wavy-slider:2.1.0\")\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSetup for multiplatform projects\u003c/summary\u003e\n\nIf you target a subset of the library supported platforms, add the library to your common source set:\n\n```kotlin\nkotlin {\n    sourceSets {\n        commonMain.dependencies {\n            implementation(\"ir.mahozad.multiplatform:wavy-slider:2.1.0\")\n            // ...\n        }\n```\n\nIf you have targets that are not supported by the library,\nadd the library separately to each supported target:\n\n```kotlin\nkotlin {\n    val desktopMain /* OR jvmMain */ by getting {\n        dependencies {\n            implementation(\"ir.mahozad.multiplatform:wavy-slider:2.1.0\")\n            // ...\n        }\n    }\n    androidMain.dependencies {\n        implementation(\"ir.mahozad.multiplatform:wavy-slider:2.1.0\")\n        // ...\n    }\n    // Other targets...\n```\n\n\u003c/details\u003e\n\nUsing the WavySlider is much like using the Material Slider\n(you can even make it a regular flat Slider):\n\n```kotlin\nimport ir.mahozad.multiplatform.wavyslider.material3.WavySlider as WavySlider3\nimport ir.mahozad.multiplatform.wavyslider.material.WavySlider as WavySlider2\nimport ir.mahozad.multiplatform.wavyslider.WaveDirection.*\n\n@Composable\nfun MyComposable() {\n    var fraction by remember { mutableStateOf(0.5f) }\n    WavySlider3( // OR WavySlider2( see the imports above that use \"as ...\"\n        value = fraction,\n        onValueChange = { fraction = it },\n        waveLength = 16.dp,     // Set this to 0.dp to make the Slider flat\n        waveHeight = 16.dp,     // Set this to 0.dp to make the Slider flat\n        waveVelocity = 15.dp to HEAD, // Speed per second and its direction\n        waveThickness = 4.dp,   // Defaults to 4.dp irregardless of variant\n        trackThickness = 4.dp,  // Defaults to a thickness based on variant\n        incremental = false,    // Whether to gradually increase waveHeight\n        // animationSpecs = ... // Customize various animations of the wave\n        // Other options that are available in standard Material 2/3 Slider\n    )\n}\n```\n\n## FAQ\n\n\u003cdetails\u003e\u003csummary\u003eHow to create a wavy \u003ci\u003edivider\u003c/i\u003e that is still and fixed and not animated?\u003c/summary\u003e\n\n```kotlin\nWavySlider3(\n    value = 1f,\n    onValueChange = {},\n    thumb = {},\n    track = {\n        SliderDefaults.Track(\n            it,\n            enabled = false,\n            thumbTrackGapSize = 0.dp,\n            waveThickness = 1.dp,\n            waveVelocity = 0.dp to RIGHT,\n            animationSpecs = WaveAnimationSpecs(\n                waveAppearanceAnimationSpec = snap(),\n                waveVelocityAnimationSpec = snap(),\n                waveHeightAnimationSpec = snap()\n            )\n        )\n    }\n)\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eHow to flatten the wave on click/drag or make the slider wavy only on click/drag?\u003c/summary\u003e\n\nSee https://github.com/mahozad/wavy-slider/issues/8#issuecomment-1903921917.\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eHow to disable the initial/starting/appearance (aka composition) animation of the wave?\u003c/summary\u003e\n\nUse the Compose `snap()` animation spec (make sure to import the proper M2/M3 `SliderDefaults` object):\n```kotlin\nanimationSpecs = SliderDefaults.WaveAnimationSpecs.copy(waveAppearanceAnimationSpec = snap())\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eHow to get or use the default value of properties like waveHeight, waveLength, or waveVelocity?\u003c/summary\u003e\n\nUse the properties available in `SliderDefaults` (make sure to import the proper M2/M3 `SliderDefaults` object).\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eHow is the wavy slider component used in its website showcase (i.e. in an HTML/CSS/JavaScript page)?\u003c/summary\u003e\n\nCompose Multiplatform and its underlying Kotlin Multiplatform, support compiling Kotlin code to JavaScript (Kotlin/JS)\nor WASM (Kotlin/Wasm). The project showcase website is in fact also made with Compose Multiplatform framework with\nthe help of a little bit of regular HTML and CSS code.\n\u003c/details\u003e\n\n## Related\n\n  - AOSP native squiggly progress: [Main branch][Android main branch implementation] ❖ [Android 14][Android 14 branch implementation] ❖ [Android 13][Android 13 branch implementation]\n  - LinearWavyProgressIndicator (available since [Material 3 v1.4.0-alpha01][Material 3 v1.4.0-alpha01])\n  - Squiggly slider (Android-only): https://github.com/saket/squiggly-slider\n  - Wave slider (Android-only): https://github.com/galaxygoldfish/waveslider\n  - Squiggly seekbar (Flutter): https://github.com/hannesgith/squiggly_slider\n  - WavyLineView (Android XML): https://github.com/andyxialm/WavyLineView\n  - Sliders with custom styles: https://github.com/krottv/compose-sliders\n  - Customizable seeker/slider: https://github.com/2307vivek/Seeker\n  - Squiggly text underlines: https://github.com/saket/ExtendedSpans\n  - Waveform seekbar: https://github.com/massoudss/waveformSeekBar\n  - Colorful sliders: https://github.com/SmartToolFactory/Compose-Colorful-Sliders\n  - StackOverflow posts:\n    + [How to create the Android 13 squiggly slider using Jetpack Compose?](https://stackoverflow.com/q/77927207/8583692) \n    + [Implement new slider in Android 13 media player via Jetpack Compose](https://stackoverflow.com/q/75268182/8583692)\n    + [Wave like seek bar for music player app in android jetpack compose](https://stackoverflow.com/q/77661902/8583692)\n    + [Squiggly Seekbar with Animation in Flutter](https://stackoverflow.com/q/75889414/8583692)\n    + [Is it possible to make a squiggly line?](https://stackoverflow.com/q/17285514/8583692)\n\n[Kotlin badge]: https://img.shields.io/badge/Kotlin-2.2.0-303030.svg?labelColor=303030\u0026logo=data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOC45MyAxOC45MiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHI9IjIxLjY3OSIgY3g9IjIyLjQzMiIgY3k9IjMuNDkzIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTQuMTMgLTIuNzE4KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgPHN0b3Agc3RvcC1jb2xvcj0iI2U0NDg1NyIgb2Zmc2V0PSIuMDAzIi8+CiAgICA8c3RvcCBzdG9wLWNvbG9yPSIjYzcxMWUxIiBvZmZzZXQ9Ii40NjkiLz4KICAgIDxzdG9wIHN0b3AtY29sb3I9IiM3ZjUyZmYiIG9mZnNldD0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHBhdGggZmlsbD0idXJsKCNncmFkaWVudCkiIGQ9Ik0gMTguOTMsMTguOTIgSCAwIFYgMCBIIDE4LjkzIEwgOS4yNyw5LjMyIFoiLz4KPC9zdmc+Cg==\n[Maven Central badge]: https://img.shields.io/maven-central/v/ir.mahozad.multiplatform/wavy-slider?label=Maven%20Central\u0026labelColor=303030\u0026logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN0eWxlPi5he2ZpbGw6bm9uZTt9LmJ7Y2xpcC1wYXRoOnVybCgjYSk7fS5je2ZpbGw6I2ZmZjt9PC9zdHlsZT4KICAgIDxjbGlwUGF0aCBpZD0iYSI+CiAgICAgIDxyZWN0IGNsYXNzPSJhIiB4PSIxNC43IiB5PSIxMSIgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxNTEiLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXBQYXRoMTMiPgogICAgICA8cmVjdCBjbGFzcz0iYSIgeD0iMTQuNyIgeT0iMTEiIHdpZHRoPSIxNzEiIGhlaWdodD0iMTUxIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iYyIgdHJhbnNmb3JtPSJtYXRyaXgoLjE2NCAwIDAgLjE2NCAtOC4zNyAtMS44MSkiIGQ9Im0xMDAgMTEtNDIuMyAyNC40djQ4LjlsNDIuMyAyNC40IDQyLjMtMjQuNHYtNDguOXptMzAuMiA2Ni4zLTMwLjIgMTcuNC0zMC4yLTE3LjR2LTM0LjlsMzAuMi0xNy40IDMwLjIgMTcuNHoiIGNsaXAtcGF0aD0idXJsKCNjbGlwUGF0aDEzKSIvPgo8L3N2Zz4K\n[Compose Multiplatform badge]: https://img.shields.io/badge/Compose_Multiplatform-1.8.2-303030.svg?labelColor=303030\u0026logo=data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjU2IiB2aWV3Qm94PSIwIDAgNTAgNTYiIHdpZHRoPSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNDIuMTMxNSAwIDAgNDIuMTMxOCAxNi4xMzA2IDE0LjQ0MTIpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNTM4M2VjIi8+PHN0b3Agb2Zmc2V0PSIuODY2OTkiIHN0b3AtY29sb3I9IiM3ZjUyZmYiLz48L3JhZGlhbEdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIzNy4xNzE5IiB4Mj0iMTAuOTczMyIgeTE9Ii4zNzY2MzgiIHkyPSIzMC4wMzUzIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzM2MzZmYiLz48c3RvcCBvZmZzZXQ9Ii44Nzg0MyIgc3RvcC1jb2xvcj0iIzUzODNlYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0ibTQ5LjI1IDE0djI4bC0yNC4yNSAxNC0yNC4yNS0xNHYtMjhsMjQuMjUtMTR6IiBmaWxsPSIjNjA3NWYyIi8+PHBhdGggZD0ibTM0LjUgMjIuNXYxMWwtOS41IDUuNXYxN2wyNC4yNS0xNHYtMjh6IiBmaWxsPSIjNmI1N2ZmIi8+PHBhdGggZD0ibTI1IDM5LTkuNS01LjV2LTExbC0xNC43NS04LjV2MjhsMjQuMjUgMTR6IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0ibTE1LjUgMjIuNSA5LjUtNS41IDkuNSA1LjUgMTQuNzUtOC41LTI0LjI1LTE0LTI0LjI1IDE0eiIgZmlsbD0idXJsKCNiKSIvPjxwYXRoIGQ9Im0yNSAxNyA5LjUyNjMgNS41djExbC05LjUyNjMgNS41LTkuNTI2My01LjV2LTExeiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==\n[Kotlin release]: https://github.com/JetBrains/kotlin/releases/tag/v2.2.0\n[Compose Multiplatform release]: https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.8.2\n[Library Maven Central release]: https://repo1.maven.org/maven2/ir/mahozad/multiplatform/wavy-slider/2.1.0/\n[Material Slider]: https://m3.material.io/components/sliders/overview\n[Android 13 media controls]: https://www.xda-developers.com/android-13-beta-1-media-controls-animation/\n[Jetpack Compose]: https://developer.android.com/jetpack/compose\n[Compose Multiplatform]: https://github.com/JetBrains/compose-multiplatform\n[Android main branch implementation]: https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/packages/SystemUI/src/com/android/systemui/media/controls/ui/drawable/SquigglyProgress.kt\n[Android 14 branch implementation]: https://android.googlesource.com/platform/frameworks/base/+/refs/heads/android14-release/packages/SystemUI/src/com/android/systemui/media/controls/ui/SquigglyProgress.kt\n[Android 13 branch implementation]: https://android.googlesource.com/platform/frameworks/base/+/refs/heads/android13-release/packages/SystemUI/src/com/android/systemui/media/SquigglyProgress.kt\n[Material 3 v1.4.0-alpha01]: https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/WavyProgressIndicator.kt#L132\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahozad%2Fwavy-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahozad%2Fwavy-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahozad%2Fwavy-slider/lists"}