Skip to content

Let callers replace the slider thumb - #324

Merged
smelfungus merged 1 commit into
masterfrom
feat/custom-thumb
Sep 2, 2026
Merged

smelfungus merged 1 commit into
masterfrom
feat/custom-thumb

Conversation

@smelfungus

@smelfungus smelfungus commented Sep 2, 2026 •

Copy link
Copy Markdown
Member

Two open issues asked for this from opposite directions: #193 wanted a differently shaped thumb, and #206 wanted the old library's acp_thumb_* dimens settable in code. Porting those as parameters would have widened the API by four values and still not drawn #193's thumb, so every slider takes a thumb slot instead — one parameter that covers size, shape, stroke and anything else, and that mirrors the track slot ColorSlider already passes to Material 3.

The slot takes the slider's InteractionSource rather than Material 3's SliderState. SliderState is experimental, so naming it in a public signature forces an opt-in on everyone calling ColorSlider — every internal slider failed to compile the moment it appeared there. It is also not what a thumb is missing: the caller passed value and thumbColor in and can capture them, while press and drag state is created inside ColorSlider and cannot otherwise be reached.

A custom thumb also needs the track to make room for it. The gap around the thumb was computed from Material 3's 4dp handle width through two private constants, so a wider thumb simply covered it and sat flush against the gradient. GradientTrack now takes that width and the clearance as parameters, exposed as ColorPickerDefaults.ThumbWidth and ThumbTrackGap and threaded through every slider alongside the slot.

The sample gains a Custom thumb section, and the same composable renders a screenshot golden so the README image is the code the sample runs rather than a drawing of it. Its ring is the fill lifted toward white, not a light-or-dark choice made at a luminance threshold: sweeping lightness across such a threshold moves the ring by 234/255 between adjacent drag positions, which reads as a snap, where the continuous version moves by 0.1/255. It also raises its shadow while dragged, which is what the InteractionSource is there for.

Closes #193
Closes #206

Two open issues asked for this from opposite directions: #193 wanted a differently shaped thumb, and #206 wanted the old library's acp_thumb_* dimens settable in code. Porting those as parameters would have widened the API by four values and still not drawn #193's thumb, so every slider takes a `thumb` slot instead — one parameter that covers size, shape, stroke and anything else, and that mirrors the `track` slot ColorSlider already passes to Material 3.

The slot takes the slider's InteractionSource rather than Material 3's SliderState. SliderState is experimental, so naming it in a public signature forces an opt-in on everyone calling ColorSlider — every internal slider failed to compile the moment it appeared there. It is also not what a thumb is missing: the caller passed `value` and `thumbColor` in and can capture them, while press and drag state is created inside ColorSlider and cannot otherwise be reached.

A custom thumb also needs the track to make room for it. The gap around the thumb was computed from Material 3's 4dp handle width through two private constants, so a wider thumb simply covered it and sat flush against the gradient. GradientTrack now takes that width and the clearance as parameters, exposed as ColorPickerDefaults.ThumbWidth and ThumbTrackGap and threaded through every slider alongside the slot.

The sample gains a Custom thumb section, and the same composable renders a screenshot golden so the README image is the code the sample runs rather than a drawing of it. Its ring is the fill lifted toward white, not a light-or-dark choice made at a luminance threshold: sweeping lightness across such a threshold moves the ring by 234/255 between adjacent drag positions, which reads as a snap, where the continuous version moves by 0.1/255. It also raises its shadow while dragged, which is what the InteractionSource is there for.
@smelfungus
smelfungus merged commit d995912 into master Sep 2, 2026
2 checks passed
@smelfungus
smelfungus deleted the feat/custom-thumb branch September 2, 2026 02:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Define the size in the code custom thumb

1 participant