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

adobe · Sep 23, 2024 · 423d759 · 423d759
1 parent eaf250d
commit 423d759
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/.changeset/nervous-ways-happen.md b/.changeset/nervous-ways-happen.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
@@ -146,7 +146,8 @@
 }
 
 .spectrum-Slider-controls {
-	display: inline-block;
+	display: flex;
+	align-items: center;
 	box-sizing: border-box;
 	cursor: pointer;
 	position: relative;
@@ -284,7 +285,6 @@
 }
 
 .spectrum-Slider-ramp {
-	margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
 	block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
 
 	position: absolute;
@@ -310,7 +310,6 @@
 	inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 	block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
 
-	inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
 	margin-block: 0;
 	margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
 	border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));