Looking to hire developers?
Hi all,
Jumping back into front-end after a brief break. I gave this one a shot with only HTML, CSS and JS. I'd appreciate any feedback. Thanks!
@ApplePieGiraffe
Posted
Hello there, JP Yepez! 👋
Just wanted to say, good job on this challenge! 👏 Your solution looks good, is responsive, and the slider works well! 👍
Keep coding (and happy coding, too)! 😁
@jpyepez
Posted
@ApplePieGiraffe Hey, thanks for the kind words! Really appreciate the support, see you around! :)
@Etang131
Posted
To fix the background image on the thumb you might want to use: background-image: url("/images/icon-slider.svg"); background-repeat: no-repeat; background-position: center; background-size: auto;
Also how did you get your slider to change colors?
@jpyepez
Posted
@Etang131 Thanks, I'll give it a shot!
To change the slider colors, I am using pseudo-classes on the thumb:
#range::-webkit-slider-thumb:active { cursor: grabbing; background-color: var(--thumb-active); }
And then I simply used a linear gradient, mapping the current range value to the color break points:
// range background colors range.oninput = event => { let val = event.target.value; let rangeProgress = 100/range.max*val; let views = pricing[val].views; currentPrice = pricing[val].price;
range.style.background = `linear-gradient(to right, var(--soft-cyan) 0%, var(--soft-cyan) ${rangeProgress}%, hsl(224, 65%, 95%) ${rangeProgress}%, hsl(224, 65%, 95%) 100%)`;
pageViews.textContent = `${views}`
price.textContent = `$${applyDiscount(currentPrice).toFixed(2)}`
}
Hope this helps, let me know if you have any other questions!
@Etang131
Posted
@jpyepez I found the issue was a css one. If I had the background value already defined it would not allow it to be updated on chrome.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
