diff --git a/css/ol.css b/css/ol.css
index 2fb42f7419..5dc3fe2d68 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -226,7 +226,7 @@ button.ol-full-screen-true:after {
 }
 .ol-zoom .ol-has-tooltip:hover [role=tooltip],
 .ol-zoom .ol-has-tooltip:focus [role=tooltip] {
-  bottom: 1.1em;
+  top: 1.1em;
 }
 .ol-full-screen .ol-has-tooltip:hover [role=tooltip],
 .ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
@@ -237,38 +237,42 @@ button.ol-full-screen-true:after {
 
 .ol-zoomslider {
   position: absolute;
-  top: 67px;
-  left: 8px;
+  top: 4.5em;
+  left: .5em;
+
   background: #eee;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 4px;
-  width: 28px;
-  height: 200px;
   outline: none;
   overflow: hidden;
-  padding: 0;
+  
+  width: 1.5675em;
+  height: 200px;
+  padding: 3px;
   margin: 0;
 }
 .ol-zoomslider-thumb {
   position: absolute;
   display: block;
-  padding: 0;
   background: #7b98bc;
   background: rgba(0,60,136,0.5);
-  margin: 3px;
   border-radius: 2px;
   outline: none;
   overflow: hidden;
-  height: 20px;
-  width: 22px;
+  cursor: pointer;
+
+  font-size: 1.14em;
+  height: 1em;
+  width: 1.375em;
+  margin: 3px;
+  padding: 0;
 }
 .ol-touch .ol-zoomslider {
-  top: 82px;
-  width: 36px;
+  top: 5.5em;
+  width: 2.052em;
 }
 .ol-touch .ol-zoomslider-thumb {
-  height: 18px;
-  width: 30px;
+  width: 1.8em;
 }
 
 .ol-zoom-extent button,
diff --git a/examples/zoomslider.html b/examples/zoomslider.html
index a77c2c2273..13995fecc8 100644
--- a/examples/zoomslider.html
+++ b/examples/zoomslider.html
@@ -13,26 +13,19 @@
  * The zoomslider in the second map shall be placed between the zoom-in and
  * zoom-out buttons.
  */
-#map2 .ol-zoom a.ol-zoom-out {
+#map2 .ol-zoom .ol-zoom-out {
   margin-top: 202px;
 }
 #map2 .ol-zoomslider {
   background-color: transparent;
-  top: 34px;
-}
-#map2 .ol-zoomslider-thumb {
-  height: 12px;
+  top: 2.3em;
 }
 
-#map2 .ol-touch .ol-zoom a.ol-zoom-out {
+#map2 .ol-touch .ol-zoom .ol-zoom-out { 
   margin-top: 212px;
 }
 #map2 .ol-touch .ol-zoomslider {
-  top: 42px;
-  height: 210px;
-}
-#map2 .ol-touch .ol-zoomslider-thumb {
-  height: 20px;
+  top: 2.75em;
 }
 
 /**