From 496f4fca8874cebf6018b1b3b87d40fc7a7b5d75 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 8 Oct 2021 09:58:21 -0700 Subject: [PATCH 1/2] fix: make tick slider handles align to ticks perfectly --- components/slider/index.css | 22 ++++++++++++ components/slider/metadata/slider.yml | 50 +++++++++++++++++---------- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/components/slider/index.css b/components/slider/index.css index e8c7974a031..581a63f6d48 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -389,12 +389,16 @@ governing permissions and limitations under the License. } &:first-of-type { + /* fix off-by-one alignment */ + inset-inline-start: calc(var(--spectrum-slider-tick-mark-width) / -2); .spectrum-Slider-tickLabel { inset-inline-start: 0; } } &:last-of-type { + /* fix off-by-one alignment */ + inset-inline-end: calc(var(--spectrum-slider-tick-mark-width) / -2); .spectrum-Slider-tickLabel { inset-inline-end: 0; } @@ -412,3 +416,21 @@ governing permissions and limitations under the License. } } } + +/* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */ +.spectrum-Slider-handleContainer, +.spectrum-Slider-trackContainer { + width: calc(100% + var(--spectrum-slider-handle-width-adjusted)); + + position: absolute; + top: calc(var(--spectrum-slider-track-height) / 2 - 1px); + + margin-left: calc(var(--spectrum-slider-handle-width-adjusted) / 2 * -1); +} + +.spectrum-Slider-trackContainer { + height: var(--spectrum-slider-height); + + /* stop edges from peeking out */ + overflow: hidden; +} diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml index a70b615cea1..c3a897edfab 100644 --- a/components/slider/metadata/slider.yml +++ b/components/slider/metadata/slider.yml @@ -188,19 +188,22 @@ examples:
14
-
-
-
- +
+
+
+
+
+
+ +
-
@@ -209,19 +212,22 @@ examples:
14
-
-
-
- +
+
+
+
+
+
+ +
-
- id: slider-tick @@ -234,7 +240,6 @@ examples:
14
-
0
@@ -255,10 +260,15 @@ examples:
100
-
- +
+
+
+
+
+
+ +
-
@@ -267,7 +277,6 @@ examples:
14
-
0
@@ -288,10 +297,15 @@ examples:
100
-
- +
+
+
+
+
+
+ +
-
- id: slider-player From 2d57a2078236eeac094ecb610f68bbeda3330016 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Fri, 8 Oct 2021 13:43:19 -0700 Subject: [PATCH 2/2] feat: only use round slider values in demo, update value display --- site/resources/js/enhancement.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/site/resources/js/enhancement.js b/site/resources/js/enhancement.js index 30b77e73a67..53c331753ab 100644 --- a/site/resources/js/enhancement.js +++ b/site/resources/js/enhancement.js @@ -478,7 +478,7 @@ function makeDoubleSlider(slider) { var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft; var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0); - var percent = (x / sliderOffsetWidth) * 100; + var percent = Math.round((x / sliderOffsetWidth) * 100); if (isRTL()) { percent = 100 - percent; @@ -545,6 +545,7 @@ function makeSlider(slider) { var handle = handles[0]; var isColor = slider.classList.contains('spectrum-Slider--color'); var fill = slider.querySelector('.spectrum-Slider-fill'); + var value = slider.querySelector('.spectrum-Slider-value'); if (handles.length > 1) { makeDoubleSlider(slider); @@ -575,12 +576,16 @@ function makeSlider(slider) { var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft; var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0); - var percent = (x / sliderOffsetWidth) * 100; + var percent = Math.round((x / sliderOffsetWidth) * 100); if (isRTL()) { percent = 100 - percent; } + if (value) { + value.innerText = percent; + } + if (leftTrack && rightTrack && !isColor) { leftTrack.style.width = percent + '%'; rightTrack.style.width = (100 - percent) + '%';