Using SCSS with the variable and Javascript could’t read my variable and complained about setProperty

It supposed to show two different images by moving the slider to the left or right.
enter image description here

However, i got this error.
enter image description here

Seems like the setProperty isnt working properly as I wished and I tried to use plain CSS they complained about

enter image description here

So probably the javascript isnt working properly?

Does anyone know what’s the problem is? thanks

HTML

    <main>
        <div class="container">
            <div class="image-container">
                <img class="image-before slider-image"
                    src="/img/before.png" alt="before image">
                <img class="image-after slider-image"
                src="/img/after.png" alt="before image">
            </div>
            <input type="range" min="0" step="10" max="100" value="50" class="slider" aria-label="Percentage of before photo shown" />
            <div class="slider-line">
                <div class="slider-button" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="96" y1="128" x2="16" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="48 160 16 128 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="160" y1="128" x2="240" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="208 96 240 128 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
                </div>
            </div>
        </div>
    </main>

SCSS

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

$white : #dddddd;
$position: 50%;
$box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);

img {
    display: block;
    max-width: 100%;
}

main {
    display: grid;
    place-items: center;
    min-height: 100vh;
}


.container {
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    position: $position;
}

.image-container {
    max-width: 800px;
    max-height: 90vh;
    aspect-ratio: 1/1;

}

.slider-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.image-before {
    position: absolute;
    inset: 0;
    width: $position;
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    // for firefox
    width: 100%;
    height: 100%;

    &:focus-visible ~ .slider-button{
        outline: 5px solid black;
        outline-offset: 3px;
    }
}

// .slider:focus-visible ~ .slider-button {
//     outline: 5px solid black;
//     outline-offset: 3px;
// }

.slider-line {
    position: absolute;
    inset: 0;
    width: 0.2rem;
    height: 100%;
    background-color: $white;
    z-index: 10;
    left: $position;
    transform: translateX(-50%);
    pointer-events: none;
  
}

.slider-button {
    position: absolute;
    background-color: $white;
    padding: .5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: $position;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: $box-shadow;
}

JS

const container = document.querySelector(".container");

document.querySelector(".slider").addEventListener("input", (e) => {
  container.style.setProperty(`$position`), `${e.target.value}%`;
});