How do I style a range control to include a vertical line

Question

I'm working with Openlayers and I've implemented the layer swipe control.

https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

I would like to have this same functionality with a line extending vertically across the map. Something like this... http://viglino.github.io/ol-ext/examples/control/map.control.swipe.html

I've implemented the swipe like this...

In the HTML <input id="swipe" type="range" style="width: 100%;">

In the cs file

const imagery = new TileLayer({
      source: new XYZ({
        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + '19eciGimIzBlp29oJUJO',
        maxZoom: 20,
      }),
    });
    map.addLayer(imagery);

    const swipe = <HTMLInputElement> document.getElementById('swipe');

    imagery.on('prerender', function (event) {
      const gl = <WebGLRenderingContext> event.context;
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.enable(gl.SCISSOR_TEST);

      const mapSize = map.getSize(); // [width, height] in CSS pixels

      // get render coordinates and dimensions given CSS coordinates
      const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
      const topRight = getRenderPixel(event, [mapSize[0], 0]);

      const width = (topRight[0] - bottomLeft[0]) * (Number(swipe.value) / 100);
      const height = topRight[1] - bottomLeft[1];
      gl.scissor(bottomLeft[0], bottomLeft[1], width, height);

    });

    imagery.on('postrender', function (event) {
      const gl = <WebGLRenderingContext> event.context;
      gl.disable(gl.SCISSOR_TEST);
    });
    const listener = function () {
      map.render();
    };
    swipe.addEventListener('input', listener);
    swipe.addEventListener('change', listener);

Answer 1

You can change the direction that the slider is changing.

const width = topRight[0] - bottomLeft[0];
const height = Math.round((topRight[1] - bottomLeft[1]) * (swipe.value / 100));

By changing these two lines you can change the direction of the slice.

you can see a live example of the map here.