Before using this library, you must first add it as a dependency to your project

1. Make sure you have JitPack added as a repository in your root-level build.gradle file

allprojects {
    repositories {
        ..
        maven { url 'https://jitpack.io' }
    }
}

2. Add the dependency in your :app level build.gradle

dependencies {
      ..
      implementation 'com.github.galaxygoldfish:waveslider:VERSION'
 }

The main component of the library is the WaveSlider() composable, which can be used in any @Composable function context. Here is an example of the most basic use case:

 var sliderValue by remember { mutableStateOf(0.4F) }

 WaveSlider(
     value = sliderValue,
     onValueChange = { sliderValue = it }
)

By default, the wave animates indefinitely and flattens when the user adjusts the slider, however this behavior is customizable with the WaveAnimationOptions class. To use it, supply the animationOptions parameter.

 WaveSlider(
     ..
     animationOptions = WaveSliderDefaults.animationOptions(
          animateWave = true, // Whether to animate the wave
          reverseDirection = false, // When true, the wave's direction will be to the left
          flatlineOnDrag = true, // Whether to flatten the wave when dragging the slider
          reverseFlatline = false // When true, the slider will be flat by default and wavy when dragg# ing
     )
)

To experiment with the different animation options, download the demo application

WaveSlider supports the enabled/disabled state with identical behavior to the Material Slider component. When the slider is disabled, it will not respond to user input, the animation will stop and separate disabled state colors will be used.

WaveSlider(
    ..
    enabled = false
)

The WaveSlider allows customization of colors similar to the Material Slider composable, however it uses a separate WaveSliderColors class. To use it, you can create an instance using the WaveSliderDefaults.colors() method:

WaveSlider(
     ..
     colors = WaveSliderDefaults.colors(
          thumbColor = MaterialTheme.colorScheme.primary,
          activeTrackColor = MaterialTheme.colorScheme.primaryContainer 
          ..
     )
)

The WaveSlider library offers 4 pre-made thumb components that you can use, or you can create your own custom thumb if needed. If you are creating your own thumb, you can use LocalThumbColor.current as the main color to match the rest of the slider colors. To test out the included thumb components, check out the demo app

Using a built-in thumb:

WaveSlider(
    ..
    thumb = {
        DiamondThumb()
    }
)

Using a custom thumb:

WaveSlider(
   ..
   thumb = {
       Box(
           modifier = Modifier.clip(RoundedCornerShape(35.dp)
                          .background(LocalThumbColor.current) // Use this to match the slider colors
       ) { .. }
   }
)

Additionally, if you would like to fine tune the amplitude and frequency of the wave, you may supply them as float values to the composable. Keep in mind that it is a sine wave and the default amplitude is 15F and frequency is 0.07F

WavySlider(
    ..
    waveOptions = WaveSliderDefaults.waveOptions(
        frequency = 0.05F,
        amplitude = 20F
    )
)

Behaving like the Material Slider component, WaveSlider supports it in the same manner

WaveSlider(
    ..
    steps = 5

If you run into any bug or unwanted behavior, or have a feature to add, please open an issue or pull request 👨🏻‍💻