Merge pull request #12216 from MoonE/zoomslider-layout

Fix ZoomSlider layout

examples/zoomslider.css

@@ -3,11 +3,17 @@
  * zoom-out buttons.
  */
 #map2 .ol-zoom .ol-zoom-out {
-  margin-top: 204px;
+  margin-top: 200px;
 }
 #map2 .ol-zoomslider {
   background-color: transparent;
-  top: 2.3em;
+  /*
+  Zoom control top: 0.5em
+  Zoom control padding: 2px
+  Zoom in button margin top: 1px
+  Zoom in button height: font size 1.14em * 1.375 height
+  */
+  top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
 }
 
 #map2 .ol-touch .ol-zoom .ol-zoom-out {
@@ -40,7 +46,7 @@
   height: 15px;
   padding: 0;
   box-shadow: 0 0 5px rgb(255,69,0);
-  border-radius: 20px;
+  border-radius: 7.5px;
 }
 
 #map3 .ol-zoomslider:hover {
@@ -53,7 +59,7 @@
   margin: 0;
   filter: none;
   background-color: rgba(255,69,0,0.6);
-  border-radius: 20px;
+  border-radius: 7.5px;
 }
 #map3 a.ol-zoomslider-handle:hover {
   background-color: rgba(255,69,0,0.7);

src/ol/control/ZoomSlider.js

@@ -183,22 +183,29 @@ class ZoomSlider extends Control {
    */
   initSlider_() {
     const container = this.element;
-    const containerWidth = container.offsetWidth;
-    const containerHeight = container.offsetHeight;
+    let containerWidth = container.offsetWidth;
+    let containerHeight = container.offsetHeight;
     if (containerWidth === 0 && containerHeight === 0) {
       return (this.sliderInitialized_ = false);
     }
 
+    const containerStyle = getComputedStyle(container);
+    containerWidth -=
+      parseFloat(containerStyle['paddingRight']) +
+      parseFloat(containerStyle['paddingLeft']);
+    containerHeight -=
+      parseFloat(containerStyle['paddingTop']) +
+      parseFloat(containerStyle['paddingBottom']);
     const thumb = /** @type {HTMLElement} */ (container.firstElementChild);
-    const computedStyle = getComputedStyle(thumb);
+    const thumbStyle = getComputedStyle(thumb);
     const thumbWidth =
       thumb.offsetWidth +
-      parseFloat(computedStyle['marginRight']) +
-      parseFloat(computedStyle['marginLeft']);
+      parseFloat(thumbStyle['marginRight']) +
+      parseFloat(thumbStyle['marginLeft']);
     const thumbHeight =
       thumb.offsetHeight +
-      parseFloat(computedStyle['marginTop']) +
-      parseFloat(computedStyle['marginBottom']);
+      parseFloat(thumbStyle['marginTop']) +
+      parseFloat(thumbStyle['marginBottom']);
     this.thumbSize_ = [thumbWidth, thumbHeight];
 
     if (containerWidth > containerHeight) {