Source:  Twitter logo

I have a react app that has a slider that moves icons between 0 and 100% by 2 inputs, x and y. But when the y input is less than x, it shoots the icons LEFT style property pass the range slider.

I want to create the logic so that if the icon LEFT surpasses 100, it stays at 100

for example, x = 5 and y = 10 so the icon would be half way at 50%

but if x = 5 and y = 4, the left property which would be 125%, the icon shoots and doesnt pass the slider but stays at 100%.

My issue is when I run the for loop, it moves all even less than 100% to 100%

so if the icon was 10%, after the script it gets a value of 100%

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(arrayOfIcons[i].style.left <= '100%') {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}

TL:DR if the value of is greater than 100%, i want it to stick to 100%

You need to extract numeric value from string with percent symbol.

function extractNumberFromPercentString(s) {
    return +s.slice(0, -1);
}

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(extractNumberFromPercentString(arrayOfIcons[i].style.left) <= 100) {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}
0 users liked answer #0dislike answer #00
Olim Saidov profile pic
Olim Saidov

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).