diff --git a/.changeset/rude-rivers-crash.md b/.changeset/rude-rivers-crash.md new file mode 100644 index 0000000000..457f2199b7 --- /dev/null +++ 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 index 67f7840485..dfe6661b0d 100644 --- 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 index 9e607276bd..facc3bf855 100644 --- 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",