sorry in advance for any wrong/poor coding.
I’ve adapted the following from this original tutorial: https://www.youtube.com/watch?v=dzqDU9efnnk&t=61s
When I’ve adapted it to my code there seems to be an issue and I’m unsure where in the code. Three major problems I can see with it is the left image being bigger than the right, large padding around the whole container, and the slider javascript not working.
Any help on this would be greatly appreciated.
Please bear in mind I’m a bit of an idiot when it comes to coding skills so if you could dumb down your answer as much as possible that would be also greatly appreciated.
HTML:
<main class="led-main">
<div class="led-container">
<div class="led-image-container">
<img
class="led-image-before led-slider-image"
src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-before-led-lighting-upgrade.jpg"
alt="Before LED Lighting Upgrade" title="Image showing the project before the LED lighting upgrade"
loading="lazy"
/>
<img
class="led-image-after led-slider-image"
src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-after-led-lighting-upgrade.jpg"
alt="After LED Lighting Upgrade" title="Image showing the project after the LED lighting upgrade"
loading="lazy"
/>
</div>
<input type="range" min="0" step="10" max="100" value="50" class="led-slider" aria-label="Percentage of before photo shown"/>
<div class="slider-line"></div>
<div class="led-slider-button" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#000000" viewBox="0 0 256 256"><path d="M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z"></path></svg>
</div><br>
CSS:
.led-main{
display: grid;
place-items: center;
min-height: 100vh;
}
.led-container{
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%
}
.led-image-container{
max-width: 800px;
max-height: 90vh;
aspect-ratio: 16/9;
}
.led-slider-image{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.led-image-before{
position: absolute;
inset: 0;
width: var(--position);
}
.led-slider{
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
}
.led-slider:focus-visible ~ .led-slider-button {
outline: 2px solid black;
outline-offset: 3px;
}
.slider-line{
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
z-index: 10;
left: var(--position);
transform: translateX(-50%)
pointer-events: none;
}
.led-slider-button{
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
JavaScript:
<script type="text/javascript">
const container = document.querySelector('led-container');
document.querySelector('.led-slider').addEventListener
('input' (e) => {
container.style.setProperty('--position',
`${e.target.value}%`)
})
</script>
2
Answers
You are missing a display-block on your images
Simply add this to your code and both images should be the same size.
If you need some more information about display / display block you can find that here Mozilla or here w3schools
The code you provided in action with display block applied to the images: With some placeholder images
The first issue is with your JavaScript code. There is a syntax error in the event listener function. You are missing a comma after the ‘input’ event and a closing parenthesis and you should use .led-container instead of led-container. Here’s the corrected code: