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? w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare — Schabbi
– Schabbi, Commented Feb 10, 2023 at 17:16
Welcome! Can you please read 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. — Koedlt
– Koedlt, Commented Feb 14, 2023 at 7:02

Kavian Rabbani · Accepted Answer · 2023-02-10 17:02:55Z

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, 2023 at 17:02

Kavian Rabbani

9845 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A N Over a year ago

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. stackoverflow.com/questions/17787845/… I found a solution. :D

Meymoun Boualaoui · Accepted Answer · 2023-02-10 17:04:29Z

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, 2023 at 17:04

Meymoun Boualaoui

1066 bronze badges

Comments

A N · Accepted Answer · 2023-02-12 21:55:20Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related