Zoomslider cannot be added to a map with no target

The zoom slider control's initSlider_ function requires that the control's element is inserted in the document. So if initSlider_ is called before the map have a target then the slider isn't correctly initialized. This commit fixes that by defering the slider initialization until the first handleMapPostrender call.

src/ol/control/zoomslidercontrol.js

@@ -62,6 +62,13 @@ ol.control.ZoomSlider = function(opt_options) {
    */
   this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
 
+  /**
+   * Whether the slider is initialized.
+   * @type {boolean}
+   * @private
+   */
+  this.sliderInitialized_ = false;
+
   /**
    * @private
    * @type {Array.<?number>}
@@ -107,11 +114,8 @@ ol.control.ZoomSlider.direction = {
  */
 ol.control.ZoomSlider.prototype.setMap = function(map) {
   goog.base(this, 'setMap', map);
-  this.initSlider_();
-  var resolution = map.getView().getView2D().getResolution();
-  if (goog.isDef(resolution)) {
-    this.currentResolution_ = resolution;
-    this.positionThumbForResolution_(resolution);
+  if (!goog.isNull(map)) {
+    map.render();
   }
 };
 
@@ -147,13 +151,17 @@ ol.control.ZoomSlider.prototype.initSlider_ = function() {
     limits = new goog.math.Rect(0, 0, 0, h);
   }
   this.dragger_.setLimits(limits);
+  this.sliderInitialized_ = true;
 };
 
 
 /**
  * @inheritDoc
  */
 ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) {
+  if (!this.sliderInitialized_) {
+    this.initSlider_();
+  }
   var res = mapEvent.frameState.view2DState.resolution;
   if (res !== this.currentResolution_) {
     this.currentResolution_ = res;

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

@@ -68,6 +68,7 @@ describe('ol.control.ZoomSlider', function() {
       control.element.style.width = '1000px';
       control.element.style.height = '10px';
       control.setMap(map);
+      control.initSlider_();
 
       var horizontal = ol.control.ZoomSlider.direction.HORIZONTAL;
       expect(control.direction_).to.be(horizontal);