Account for the thumb size when handling clicks

css/ol.css

@@ -259,7 +259,7 @@ button.ol-full-screen-true:after {
   left: .5em;
   background: #eee;
   background: rgba(255, 255, 255, 0.4);
-  width: 1.7em;
+  width: 24px;
   height: 200px;
 }
 .ol-zoomslider-thumb {
@@ -268,10 +268,11 @@ button.ol-full-screen-true:after {
   background: rgba(0,60,136,0.5);
   border-radius: 2px;
   cursor: pointer;
-  height: 1.1em;
+  height: 10px;
-  width: 1.6em;
+  width: 22px;
   margin: 3px;
 }
+
 .ol-touch .ol-zoomslider {
   top: 5.5em;
   width: 2.052em;

examples/zoomslider.html

@@ -14,7 +14,7 @@
  * zoom-out buttons.
  */
 #map2 .ol-zoom .ol-zoom-out {
-  margin-top: 206px;
+  margin-top: 204px;
 }
 #map2 .ol-zoomslider {
   background-color: transparent;

src/ol/control/zoomslidercontrol.js

@@ -15,6 +15,7 @@ goog.require('goog.math');
 goog.require('goog.math.Rect');
 goog.require('goog.style');
 goog.require('ol');
+goog.require('ol.Size');
 goog.require('ol.ViewHint');
 goog.require('ol.animation');
 goog.require('ol.control.Control');
@@ -57,6 +58,14 @@ ol.control.ZoomSlider = function(opt_options) {
    */
   this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
 
+  /**
+   * The calculated thumb size (border box plus margins).  Set when initSlider_
+   * is called.
+   * @type {ol.Size}
+   * @private
+   */
+  this.thumbSize_ = null;
+
   /**
    * Whether the slider is initialized.
    * @type {boolean}
@@ -130,25 +139,26 @@ ol.control.ZoomSlider.prototype.setMap = function(map) {
 ol.control.ZoomSlider.prototype.initSlider_ = function() {
   var container = this.element;
   var containerSize = goog.style.getSize(container);
+
   var thumb = goog.dom.getFirstElementChild(container);
-  var thumbBounds = goog.style.getBounds(thumb);
   var thumbMargins = goog.style.getMarginBox(thumb);
-  var thumbBorderBox = goog.style.getBorderBox(thumb);
+  var thumbBorderBoxSize = goog.style.getBorderBoxSize(thumb);
-  var w = containerSize.width -
+  var thumbWidth = thumbBorderBoxSize.width +
-      thumbMargins.left - thumbMargins.right -
+      thumbMargins.right + thumbMargins.left;
-      thumbBorderBox.left - thumbBorderBox.right -
+  var thumbHeight = thumbBorderBoxSize.height +
-      thumbBounds.width;
+      thumbMargins.top + thumbMargins.bottom;
-  var h = containerSize.height -
+  this.thumbSize_ = [thumbWidth, thumbHeight];
-      thumbMargins.top - thumbMargins.bottom -
+
-      thumbBorderBox.top - thumbBorderBox.bottom -
+  var width = containerSize.width - thumbWidth;
-      thumbBounds.height;
+  var height = containerSize.height - thumbHeight;
+
   var limits;
   if (containerSize.width > containerSize.height) {
     this.direction_ = ol.control.ZoomSlider.direction.HORIZONTAL;
-    limits = new goog.math.Rect(0, 0, w, 0);
+    limits = new goog.math.Rect(0, 0, width, 0);
   } else {
     this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
-    limits = new goog.math.Rect(0, 0, 0, h);
+    limits = new goog.math.Rect(0, 0, 0, height);
   }
   this.dragger_.setLimits(limits);
   this.sliderInitialized_ = true;
@@ -182,8 +192,9 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) {
 ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) {
   var map = this.getMap();
   var view = map.getView();
-  var amountDragged = this.amountDragged_(browserEvent.offsetX,
+  var amountDragged = this.amountDragged_(
-      browserEvent.offsetY);
+      browserEvent.offsetX - this.thumbSize_[0] / 2,
+      browserEvent.offsetY - this.thumbSize_[1] / 2);
   var currentResolution = view.getResolution();
   goog.asserts.assert(goog.isDef(currentResolution));
   map.beforeRender(ol.animation.zoom({