No JS Range slider UV Filter effect image on a Wordpress Site

I want to implement the following image in my wordpress website but my knowledge is not good enough for this task. I need to change the sizes of the image to the dimensions on my website and I can't delete the comparison element.

And this is the original code from Codepen: https://codepen.io/jcoulterdesign/pen/jRbKYM

I changed the original code from haml to html and test it on my side. It works but its not like the original.

Well, hopefully someone with the needed skills can lend me a hand.

best greetings

 The the dimensions on the website are these:

img - 
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;

grid - 
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center!important;
}

@media screen and (min-width: 1024px)
#blueplanet image {
    margin-left: 30px;
}

Here starts the code from codepen:

    body {
        margin: 0;
        background: black;
        height: 100vh;
        overflow: hidden;
       }
    }

       .sun, 
       .sun--bg {
        position: absolute;
        filter: url("#goovey");
        height: 100vh;
        clip-path: circle(281px at 50% 50%);
        background: url('https://d2r55xnwy6nx47.cloudfront.net/uploads/2018/07/SolarFull_SeanDoran_2880FullwidthLede-2880x1620.jpg');
       background-position: center;
       width: 100%;
       background-size: cover;
      }
    }
        
    .sun--bg {
      filter: url(index.html);
      -webkit-clip-path: none;
                  z-index: -1;
        }
    }

    body {
      height: 100vh;
      margin: 0;
      display: flex;
    }

    input[type="range"] { 
       margin: auto;
       -webkit-appearance: none;
       position: absolute;
       overflow: hidden;
       outline: none;
       height: 100vh;
       background: transparent;
       width: 100%;
       cursor: pointer;
       border-radius: 0; /* iOS */
    }

    ::-webkit-slider-runnable-track {
       background: transparent;
    }
        
    /*
    * 1. Set to 0 width and remove border for a slider without a thumb
      */

    ::-webkit-slider-thumb {
       mix-blend-mode: hue;
       -webkit-appearance: none;
       //transform: translateX(50%);
       width: 30px; /* 1 */
       filter: blur(30px);
       height: 30px;
       background: #fff;
       box-shadow: -100vw 0 0 100vw dodgerblue;
    }

    ::-moz-range-track {
      height: 40px;
      background: #ddd;
    }

    ::-moz-range-thumb {
       background: #fff;
       height: 40px;
       width: 20px;
       border: 3px solid #999;
       border-radius: 0 !important;
       box-shadow: -100vw 0 0 100vw dodgerblue;
       box-sizing: border-box;
    }

    ::-ms-fill-lower { 
       background: dodgerblue;
    }

    ::-ms-thumb { 
     background: #fff;
     border: 2px solid #999;
     height: 40px;
     width: 20px;
     box-sizing: border-box;
    }

    ::-ms-tooltip { 
     display: none;
    }

<!-- language: lang-html -->

     <div class="sun"></div>
     <div class="sun--bg"></div>
     <input class="slider" step="any" type="range"></input>
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="goovey">
              <feturbulence basefrequency=".06" numoctaves="20" result="warpper" type="fractalNoise"></feturbulence>
              <fecolormatrix in="warpper" type="hueRotate">
                <animate attributename="values" attributetype="XML" dur="9s" repeatcount="indefinite" values="0;110;150;210;280;360"></animate>
              </fecolormatrix>
              <fedisplacementmap in="SourceGraphic" scale="14" xchannelselector="R" ychannelselector="G"></fedisplacementmap>
       </filter>
      </defs>
     </svg>