IssueTracker

Jetpack Compose version: BOM 2025.02.00

Jetpack Compose component(s) used: Foundation, UI, Runtime, Animation

Android Studio Build: Android Studio Meerkat, 2023.3.1 Canary 8

Kotlin version: 2.1.10

Steps to Reproduce or Code Sample to Reproduce:

Here's a simple draggable slider, with two anchors, START and END. The positionalThreshold is set to distance * 0.8f, which I would expect to mean that the thumb only snaps to the END anchor after dragging for at least 80% of the width. The actual behavior however is that the thumb snaps to START and END exactly up until the center of the track. I intentionally set velocityThreshold to Float.MAX_VALUE so that no flinging behavior should have an effect on the snapping.

Is this an issue with the code or a bug in the AnchoredDraggableState?

enum class SliderAnchor {
	START,
	END,
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomSlider(
	modifier: Modifier = Modifier,
) {
	BoxWithConstraints(
		modifier = modifier
			.background(Color.White, CircleShape)
			.border(1.dp, Color.LightGray, CircleShape)
			.fillMaxWidth()
			.height(64.dp)
			.padding(4.dp)
	) {
		val density = LocalDensity.current
		val end = constraints.maxWidth - with(density) { 56.dp.toPx() }
		val draggableState = remember {
			AnchoredDraggableState(
				initialValue = SliderAnchor.START,
				positionalThreshold = { distance -> distance * 0.8f },
				velocityThreshold = { Float.MAX_VALUE },
				snapAnimationSpec = tween(),
				decayAnimationSpec = exponentialDecay(),
				anchors = DraggableAnchors {
					SliderAnchor.START at 0f
					SliderAnchor.END at end
				},
				confirmValueChange = { anchor -> true }
			)
		}

		Box(
			modifier = Modifier
				.fillMaxWidth()
				.anchoredDraggable(
					state = draggableState,
					orientation = Orientation.Horizontal,
					enabled = true,
				)
		) {
			Box(
				modifier = Modifier
					.offset { IntOffset(draggableState.requireOffset().roundToInt(), 0) }
					.fillMaxHeight()
					.aspectRatio(1f)
					.background(Color.DarkGray, CircleShape)
			) {
				Icon(
					Icons.AutoMirrored.Filled.ArrowForward,
					contentDescription = null,
					tint = Color.White,
					modifier = Modifier
						.align(Alignment.Center)
						.size(32.dp)
				)
			}
		}
	}
}