From f999f1a67558ec4e82ae2404969f7ca928888d45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Wed, 14 Apr 2021 22:07:38 +0200
Subject: [PATCH 1/2] Fix zoomslider layout with padding

---
 src/ol/control/ZoomSlider.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/ol/control/ZoomSlider.js b/src/ol/control/ZoomSlider.js
index 2d4e7724cc..4de7ca0254 100644
--- a/src/ol/control/ZoomSlider.js
+++ b/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) {

From fdbfb4015f2efd048229bc241fa18273112d5ffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Wed, 14 Apr 2021 22:08:23 +0200
Subject: [PATCH 2/2] Adjust zoomslider example layout

---
 examples/zoomslider.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/zoomslider.css b/examples/zoomslider.css
index 91eaa3c2b5..170eb14acb 100644
--- a/examples/zoomslider.css
+++ b/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);