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:


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


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

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

Any ideas?

Here is a Fiddle which shows the problem


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();

Updated your jsfiddle.


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

  width: 80%;
  position: absolute;

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


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

  • Thanks! css can help fixing the problem but unfortunately this is not exactly what I am looking for. – Oscar Jnn Jul 3 '17 at 14:06
  • relative style makes the position out of the map. just give absolute position with left, top on #zoom, #zoomslider. it has target property so touching ol- is meaningless – Chase Choi Jul 4 '17 at 0:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.