Flatten slider when seeking

[amirkazemzade]

In android 13 when you are seeking the slider, the waves disappear to add more focus till you release the thumb and then the waves reappear.
This can be done using dynamic wave height but then the hardcoded track height animation duration (which is 1000ms) makes it awkward.

I suggest two options:

1. Custom duration for height animation.
2. Adding flattenOnSeek option to the slider.

I think I can do the suggested options by my self. So if you are OK with it I will start working on it and then create a pull request for them.

[mahozad]

That'd be nice!

But, before adding any new features or changes, should figure out a way to resolve #7.

[amirkazemzade]

Sure!
For the first one, I suggest adding the animationDuration field with the default value of 1000ms to the Track component. Then we should add this parameter to the main component as well and pass it down to the Track.

For the second one we should somehow set the animationDuration parameter while dragging to something way shorter (I think it should be less than 200ms, maybe 100ms) for a faster transition. Also the waveHeight parameter should be set to 0.
I noticed draggableState variable in the WavySliderImpl component. I think we should use this variable to get the isDragging state of the slider. Then we could pass the isDragging to the WavySliderImpl's track lambda as a parameter. This way both the implemented Track and custom Track from user implementation can use it.

[mahozad]

It's now even possible to have different animations for when the height is changed vs when the slider is interacted with.

See Test #39 for an example:

wavy-slider/library/src/desktopTest/kotlin/ir/mahozad/multiplatform/wavyslider/VisualTest.kt

Lines 842 to 884 in 0fa041d

	var spec: AnimationSpec<Float> by remember { mutableStateOf(spec1) }
	var waveHeight by remember { mutableStateOf(16.dp) }
	val interactionSource = remember { MutableInteractionSource() }
	var isPressed by remember { mutableStateOf(false) }
	val isDragged by interactionSource.collectIsDraggedAsState()
	LaunchedEffect(isPressed, isDragged) {
	waveHeight = if (isPressed || isDragged) 0.dp else 16.dp
	spec = if (isPressed || isDragged) {
	spec2
	} else {
	delay(spec2.durationMillis.milliseconds)
	spec1
	}
	}
	Row(verticalAlignment = Alignment.CenterVertically) {
	Text(text = "Material 2:")
	WavySlider2(
	value,
	onChange,
	waveHeight = waveHeight,
	interactionSource = interactionSource,
	animationSpecs = WaveAnimationSpecs(spec),
	modifier = Modifier
	.onPointerEvent(PointerEventType.Press) { isPressed = true }
	.onPointerEvent(PointerEventType.Release) { isPressed = false }
	)
	}
	Row(verticalAlignment = Alignment.CenterVertically) {
	Text(text = "Material 3:")
	WavySlider3(
	value,
	onChange,
	waveHeight = waveHeight,
	interactionSource = interactionSource,
	animationSpecs = WaveAnimationSpecs(spec),
	modifier = Modifier
	.onPointerEvent(PointerEventType.Press) { isPressed = true }
	.onPointerEvent(PointerEventType.Release) { isPressed = false }
	)
	}
	Button(onClick = { waveHeight = if (waveHeight == 0.dp) 16.dp else 0.dp }) {
	Text(text = "Toggle waveHeight")
	}