RangeControl: Mark positioning is buggy

[jameskoster]

As can be seen in the screenshot below, or viewing this example in storybook, positioning of marks in the RangeControl component have regressed from the original implementation.

The design may be worth revisiting to align with SpacingSizesControl, but in the short term it would be good to fix this visual bug so that the marks sit neatly on the track, as they did originally.

[ramonjd]

Interesting, I can't find any recent changes to the component itself.

This seems to adjust things:

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index 89f4864aee..ec1572d267 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -154,7 +154,7 @@ export const Mark = styled.span`
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
-	top: -4px;
+	top: 9px;
 	width: 1px;
 
 	${ markFill };
@@ -170,7 +170,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 12px;
+	top: 22px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };

Does the block editor use marks in range controls anywhere?

I added them to the Cover block opacity controls to check. Seems okay 😄

2024-08-14.12.20.42.mp4

I'll get a small PR if you don't mind double checking