This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Zoom Sliders

zoom 9 zoomslider 1 slider 1 style 27 styling 1 css 2 control 3

#####

#### Default style

#### Placed between zoom controls

#### Horizontal and completely re-styled

Example of various ZoomSlider controls.

This example shows how to add a zoom slider to a map and how to customize it.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import ZoomSlider from 'ol/control/ZoomSlider.js';
    import TileLayer from 'ol/layer/Tile.js';
    import OSM from 'ol/source/OSM.js';

    /**
     * Helper method for map-creation.
     *
     * @param {string} divId The id of the div for the map.
     * @return {Map} The map instance.
     */
    function createMap(divId) {
      const source = new OSM();
      const layer = new TileLayer({
        source: source,
      });
      const map = new Map({
        layers: [layer],
        target: divId,
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
      const zoomslider = new ZoomSlider();
      map.addControl(zoomslider);
      return map;
    }

    const map1 = createMap('map1');
    const map2 = createMap('map2');
    const map3 = createMap('map3');

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Zoom Sliders</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          /**
           * 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);
          }
        </style>
      </head>
      <body>
        <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 type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "zoomslider",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }