.container {
    position: relative;
    width: 380px;
    height: 300px;
    border: 2px solid white;
}
.container .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 900px 100%;
}
.container .background-img1, .container .background-img2, .container .background-img3 {
    background-image: url('https://i.imgur.com/s08MkXC.jpg');
    /* width: 100%; */
}
.container .foreground-img1, .container .foreground-img2, .container .foreground-img3 {
    background-image: url('https://i.imgur.com/PfIWek4.jpg');
    width: 50%;
}
.container .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: rgba(242, 242, 242, .3);
    outline: none;
    margin: 0;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
}
.container .slider:hover {
    background: rgba(242, 242, 242, .1);
}
.container .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 3px;
    height: 300px;
    background: white;
    cursor: pointer;
}
.container .slider::-moz-range-thumb {
    width: 3px;
    height: 300px;
    background: white;
    cursor: pointer;
}
.container .slider-button1, .container .slider-button2, .container .slider-button3 {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    transform: translate(-20%, -50%);
    left: calc(97% - 194px);
    top: 50%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .container .slider-button:after {
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5d5d5d;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
}
.container .slider-button:before {
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5d5d5d;
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
} */

.slider-button1 .triangle-left,.slider-button2 .triangle-left,.slider-button3 .triangle-left  {
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
    position: relative;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(-99%, -118%);
  }
  
  .slider-button1 .triangle-right, .slider-button2 .triangle-right, .slider-button3 .triangle-right {
    border-top: 10px solid transparent;
    border-left: 10px solid #fff;
    border-bottom: 10px solid transparent;
    position: relative;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(99%, -118%);
}