Submitted over 2 years ago

Interactive Price range slider

enochlee•600

@iamenochlee

Preview site View code

This is a solution for...Interactive pricing component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

This is my first Javascript exercise here, i couldn't get the progress range to be colored differently as the psuedo is only supported on firefox, i also added a dark-mode using local storage, system preference feature to the site, some part of my JS are hard-coded, i hope to get better, lol, i would appreciate any feedback :)

Community feedback

dportillo23•260

@dportillo23Posted over 2 years ago

One way to solve the issue with pseudo element supported just on firefox is to add a linear gradient as background-image, and control it sizes with js, so it fills til the thumb:

css
input[type= "range"] {
    background: var(--slider-main-bg);
    background-image: linear-gradient(var(--slider-fill), var(--slider-fill));
    background-repeat: no-repeat;
}

Inside the setInterval function:

js
let sliderValue = slider.value;
let percentage = (sliderValue / 5) * 100 // 5 is the amount of choices you have now.

slider.style.backgroundSize = `${percentage} 100%` // percentage in X yo be dinamically adjusted with the position of the thumb and 100% in Y to fill it all.

Marked as helpful

Please log in to post a comment

Join our Discord community

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