The below posted code is to show a map with zoom bar or slider. The code is taken from here:


I attempt to show the zoom slider number three, that's why I set the target of the map to map3. the result is, never a horizontal zoom bar on the top-right but a tiny small button on the left.

How can I show the horizontal zoom slider on the top right of the map?


<script src="https://unpkg.com/elm-pep"></script>
  .map {
    width: 100%;
   * The zoomslider in the second map shall be placed between the zoom-in and
   * zoom-out buttons.
  #map2 .ol-zoom .ol-zoom-out {
    margin-top: 204px;
  #map2 .ol-zoomslider {
    background-color: transparent;
    top: 2.3em;

  #map2 .ol-touch .ol-zoom .ol-zoom-out {
    margin-top: 212px;
  #map2 .ol-touch .ol-zoomslider {
    top: 2.75em;

  #map2 .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
  #map2 .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
    top: 3px;

  #map2 .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
  #map2 .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
    top: 232px;

   * The zoomslider in the third map shall be horizontal, placed in the top-right
   * corner, smaller and orange.
  #map3 .ol-zoomslider {
    top: 8px;
    left: auto;
    right: 8px;
    background-color: rgba(255,69,0,0.2);
    width: 200px;
    height: 15px;
    padding: 0;
    box-shadow: 0 0 5px rgb(255,69,0);
    border-radius: 20px;

  #map3 .ol-zoomslider:hover {
    background-color: rgba(255,69,0,0.3);

  #map3 .ol-zoomslider-thumb {
    height: 15px;
    width: 15px;
    margin: 0;
    filter: none;
    background-color: rgba(255,69,0,0.6);
    border-radius: 20px;
  #map3 a.ol-zoomslider-handle:hover {
    background-color: rgba(255,69,0,0.7);

<h4>Default style</h4>
<div id="map1" class="map"></div>

<h4>Placed between zoom controls</h4>
<div id="map2" class="map"></div>

<h4>Horizontal and completely re-styled</h4>
<div id="map3" class="map"></div>
<script src="main.js"></script>


import { Component } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import 'ol/ol.css';
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';
import {defaults as defaultControls} from 'ol/control';
import {addCoordinateTransforms} from 'ol/proj';
import {applyTransform} from 'ol/extent';
import {get as getProjection, getTransform} from 'ol/proj';
import {transform} from 'ol/proj';
import {ZoomSlider} from 'ol/control';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app1';

  map : any;
  constructor() {}
  ngOnInit() {

    var source = new OSM();
    var layer = new TileLayer({
      source: source,
    var map = new Map({
      layers: [layer],
      target: 'map3',
      view: new View({
        center: [0, 0],
        zoom: 2,
    var zoomslider = new ZoomSlider();


Your Answer

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

Browse other questions tagged or ask your own question.