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

Question

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

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}%`;
});

Maybe you want to try another approach? https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare — Schabbi, Feb 10 '23 at 17:16
Welcome! Can you [please read](https://meta.stackoverflow.com/a/285557/15405732) about the problems with images of text and then edit your question to add transcriptions of your images of text as actual text? Perhaps useful: [editing help](https://stackoverflow.com/editing-help). — Koedlt, Feb 14 '23 at 07:02

score 0 · Accepted Answer · answered Feb 10 '23 at 17:02

0

I think you're closing the parenthesis pair of setProperty early. ${e.target.value}% is the second argument of this function call. Also, the property set, is position (just as it is in CSS), not $position

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

answered Feb 10 '23 at 17:02

Kavian Rabbani

934
5
15

Thank you! Yes to the parenthesis was misplaced!!! but no to the $ as i was using SASS. I also figured out SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS. https://stackoverflow.com/questions/17787845/how-to-control-sass-variable-with-javascript I found a solution. :D – A N Feb 12 '23 at 21:47

score 0 · Answer 2 · answered Feb 10 '23 at 17:04

0

The answer was already solved :

It seems like due to the (What runs) chrome extension, this issue is occurring.

Error handling response: TypeError: self.processResponse is not a function

If it didn't help you, just tell me.

answered Feb 10 '23 at 17:04

Meymoun Boualaoui

106
5

score 0 · Answer 3 · answered Feb 12 '23 at 21:55

I figured out two problems in here. First is the parenthesis closed wrongly. Second is SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS. How to control Sass Variable with javascript

hence, here is my solution

scss

    $position: 50%;

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

.image-before {
    position: absolute;
    inset: 0;
    width: var(--position, $position);
}

.slider-line {
    position: absolute;
    inset: 0;
    width: 0.2rem;
    height: 100%;
    background-color: $white;
    z-index: 10;
    left: var(--position, $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: var(--position, $position);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: $box-shadow;
}

app.js

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

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

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

3 Answers3