Html – before and after image slider not working

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>