fix(slider ramp): correct handle and ramp vertical alignment

adobe · Sep 24, 2024 · 5d7c489 · 5d7c489
1 parent 1adb2f4
commit 5d7c489
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/rude-rivers-crash.md b/.changeset/rude-rivers-crash.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/slider": minor
+---
+
+This applies a flex layout to the spectrum slider controls to consistently align the enclosed handle and ramp, while also removing the margins that might otherwise interfere with alignment. This aims to resolve the issues with the calc-based approach that exhibited variations in vertical alignment.
diff --git a/components/slider/index.css b/components/slider/index.css
@@ -152,6 +152,11 @@
 	position: relative;
 	z-index: auto;
 
+	&:not(:has(.spectrum-Slider-ticks)) {
+		display: flex;
+		align-items: center;
+	}
+
 	/* These calculations prevent the track from spilling outside of the control */
 	inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
 	margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));

diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json
@@ -27,6 +27,7 @@
     ".spectrum-Slider--tick .spectrum-Slider-handle",
     ".spectrum-Slider--tick .spectrum-Slider-tickLabel",
     ".spectrum-Slider-controls",
+    ".spectrum-Slider-controls:not(:has(.spectrum-Slider-ticks))",
     ".spectrum-Slider-fill",
     ".spectrum-Slider-fill--right",
     ".spectrum-Slider-fill:before",