zoomslider.css

/**
 * 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: 200px;
}
#map2 .ol-zoomslider {
  background-color: transparent;
  /*
  Zoom control top: 0.5em
  Zoom control padding: 2px
  Zoom in button margin top: 1px
  Zoom in button height: font size 1.14em * 1.375 height
  */
  top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
}

#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: 7.5px;
}

#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: 7.5px;
}
#map3 a.ol-zoomslider-handle:hover {
  background-color: rgba(255,69,0,0.7);
}