[GIS] 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.