OpenLayers 3 - ZoomSlider outside the map

Question

I am building a map with OpenLayers and I want to display a custom ZoomSlider outside of the map.

I know that displaying controls outside of the map goes like this:

JavaScript:

var ctrl= new ol.control.Zoom({
        target: document.getElementById('ctrl')
    });
map.addControl(ctrl);

Html:

    <div id="ctrl"></div>

But it doesn't work with the ZoomSlider Control...

Any ideas?

Here is a Fiddle which shows the problem

Answer 1

Looks like target is not an option for zoom slider according to the api doc. Use setTarget() method as shown below.

var ctrlSlider= new ol.control.ZoomSlider();
ctrlSlider.setTarget(document.getElementById('zoomSlider'));
map.addControl(ctrlSlider);

Updated your jsfiddle.

Answer 2

I achieve something by playing with the .ol- classes (display at the right of the map):

#map{ 
  width: 80%;
  position: absolute;
 }

.ol-zoomslider {
  position:fixed;
  top: 10px;
  left: auto;
  right: 20px;
}

.ol-slider-thumb{
  left:0px;
}

I don't know why this is not working with target.