I recently came across a tutorial on how to create an image comparison slider, and it worked flawlessly on Chrome. However, when I tried to load it on Firefox, the slider didn't respond at all.
Below is a snippet of the code:
const slider = document.querySelector(".slider input");
const img = document.querySelector(".images .img-2");
const dragLine = document.querySelector(".slider .drag-line");
slider.oninput = ()=>{
let sliderVal = slider.value;
dragLine.style.left = sliderVal + "%";
img.style.width = sliderVal + "%";
} *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
/* display: grid; */
height: 100%;
place-items: center;
background: #efefef;
}
.wrapper{
position: relative;
height: 600px;
width: 743px;
overflow: hidden;
background: #fff;
border: 7px solid #fff;
box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
margin: auto;
}
.wrapper .images{
height: 100%;
width: 100%;
display: flex;
}
.wrapper .images .img-1{
height: 100%;
width: 100%;
background: url("https://res.cloudinary.com/joanmm/image/upload/v1620035713/CLD/Trommel_digital.png") no-repeat;
}
.wrapper .images .img-2{
position: absolute;
height: 100%;
width: 50%;
background: url("https://res.cloudinary.com/joanmm/image/upload/v1620035603/CLD/Trommel_original.jpg") no-repeat;
}
.wrapper .slider{
position: absolute;
top: 0;
width: 100%;
z-index: 99;
}
.wrapper .slider input{
width: 100%;
outline: none;
background: none;
-webkit-appearance: none;
}
.slider input::-webkit-slider-thumb{
height: 586px;
width: 3px;
background: none;
-webkit-appearance: none;
cursor: col-resize;
}
.slider .drag-line{
width: 3px;
height: 586px;
position: absolute;
left: 49.85%;
pointer-events: none;
}
... (remaining CSS code)
<div class="wrapper">
<div class="images">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
<div class="slider">
<div class="drag-line">
<span></span>
</div>
<input type="range" min="0" max="100" value="50">
</div>
</div>Despite inspecting the code with the developer tools, I couldn't find any evident errors that could explain why the slider isn't functioning on Firefox.
Can anyone provide insight into what might be causing this issue?