.split-image-comparison__slider {
  --divider-width: 0px;
  --divider-color: transparent;
  --default-handle-opacity: 0;
}


.split-image-comparison__slider .custom-animated-handle {
  transition: transform 0.2s;
}
.split-image-comparison__slider:hover .custom-animated-handle {
  transform: scale(1.2);
}

.split-image-comparison .divider{
  width:10px;
  left:5px;
  display:block;
  height:100%;

  background-color: linear-gradient(to bottom, #F2E100, #D82B87, #0082C5, #71C2B6);
}

/* Main css for this is inside the js file and has to be controlled through it. Example:


:host{
  --divider-width: 1px;
  --divider-color: #fff;
  --divider-shadow: none;
  --default-handle-width: 50px;
  --default-handle-color: #fff;
  --default-handle-opacity: 1;
  --default-handle-shadow: none;
  --handle-position-start: 50%;
  position:relative;
  display:inline-block;
  overflow:hidden;
  line-height:0;
  direction:ltr
}
@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){
  :host{
      outline-offset:1px
  }
}
::slotted(*){
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.first{
  position:absolute;
  left:0;
  top:0;
  right:0;
  line-height:normal;
  font-size:100%;
  max-height:100%;
  height:100%;
  width:100%;
  --exposure: 50%;
  --keyboard-transition-time: 0ms;
  --default-transition-time: 0ms;
  --transition-time: var(--default-transition-time)
}
.first .first-overlay-container{
  position:relative;
  clip-path:inset(0 var(--exposure) 0 0);
  transition:clip-path var(--transition-time);
  height:100%
}
.first .first-overlay{
  overflow:hidden;
  height:100%
}
.first.focused{
  will-change:clip-path
}
.first.focused .first-overlay-container{
  will-change:clip-path
}
.second{
  position:relative
}
.handle-container{
  transform:translateX(50%);
  position:absolute;
  top:0;
  right:var(--exposure);
  height:100%;
  transition:right var(--transition-time),bottom var(--transition-time)
}
.focused .handle-container{
  will-change:right
}
.divider{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.divider:after{
  content:" ";
  display:block;
  height:100%;
  border-left-width:var(--divider-width);
  border-left-style:solid;
  border-left-color:var(--divider-color);
  box-shadow:var(--divider-shadow)
}
.handle{
  position:absolute;
  top:var(--handle-position-start);
  pointer-events:none;
  box-sizing:border-box;
  margin-left:1px;
  transform:translate(calc(-50% - 0.5px), -50%);
  line-height:0
}
.default-handle{
  width:var(--default-handle-width);
  opacity:var(--default-handle-opacity);
  transition:all 1s;
  filter:drop-shadow(var(--default-handle-shadow))
}
.default-handle path{
  stroke:var(--default-handle-color)
}
.vertical .first-overlay-container{
  clip-path:inset(0 0 var(--exposure) 0)
}
.vertical .handle-container{
  transform:translateY(50%);
  height:auto;
  top:unset;
  bottom:var(--exposure);
  width:100%;
  left:0;
  flex-direction:row
}
.vertical .divider:after{
  height:1px;
  width:100%;
  border-top-width:var(--divider-width);
  border-top-style:solid;
  border-top-color:var(--divider-color);
  border-left:0
}
.vertical .handle{
  top:auto;
  left:var(--handle-position-start);
   transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)
}
This reference is from
img-comparison-slider.sneas.io
 */