Merge pull request #4255 from ahocevar/zoomslider-width

Fix zoom slider width for retina displays

css/ol.css

@@ -192,26 +192,15 @@
 .ol-zoomslider {
   top: 4.5em;
   left: .5em;
-  width: 24px;
   height: 200px;
 }
-.ol-zoomslider-thumb {
-  position: absolute;
-  background: #7b98bc;
-  background: rgba(0,60,136,0.5);
-  border-radius: 2px;
-  cursor: pointer;
+.ol-zoomslider button {
+  position: relative;
   height: 10px;
-  width: 22px;
-  margin: 3px;
 }
 
 .ol-touch .ol-zoomslider {
   top: 5.5em;
-  width: 2.052em;
-}
-.ol-touch .ol-zoomslider-thumb {
-  width: 1.8em;
 }
 
 .ol-overviewmap {

src/ol/control/zoomslidercontrol.js

@@ -79,8 +79,10 @@ ol.control.ZoomSlider = function(opt_options) {
   this.duration_ = options.duration ? options.duration : 200;
 
   var className = options.className ? options.className : 'ol-zoomslider';
-  var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV,
-      [className + '-thumb', ol.css.CLASS_UNSELECTABLE]);
+  var thumbElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'type': 'button',
+    'class': className + '-thumb ' + ol.css.CLASS_UNSELECTABLE
+  });
   var containerElement = goog.dom.createDom(goog.dom.TagName.DIV,
       [className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL],
       thumbElement);

test/spec/ol/control/zoomslidercontrol.test.js

@@ -45,7 +45,7 @@ describe('ol.control.ZoomSlider', function() {
       expect(zoomSliderThumbs.length).to.be(1);
 
       zoomSliderThumb = zoomSliderThumbs[0];
-      expect(zoomSliderThumb instanceof HTMLDivElement).to.be(true);
+      expect(zoomSliderThumb instanceof HTMLButtonElement).to.be(true);
 
       hasUnselectableCls = goog.dom.classlist.contains(zoomSliderThumb,
           'ol-unselectable');