Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
1

dportillo23

@dportillo23260 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • IP tracker app with React and Material UI

    #react#material-ui

    dportillo23•260
    Submitted almost 3 years ago

    0 comments
  • Slider component with toggle button with React

    #react#sass/scss

    dportillo23•260
    Submitted almost 3 years ago

    0 comments
  • Chart component with Chart-js

    #chart-js

    dportillo23•260
    Submitted almost 3 years ago

    2 comments
  • Responsive layout with HTML, CSS and JS


    dportillo23•260
    Submitted almost 3 years ago

    0 comments
  • Responsive landing page using SASS, and jQuery


    dportillo23•260
    Submitted almost 4 years ago

    0 comments
  • React Js, Hooks and Sass


    dportillo23•260
    Submitted almost 4 years ago

    1 comment
View more solutions

Latest comments

  • enochlee•600
    @iamenochlee
    Submitted almost 3 years ago

    Interactive Price range slider

    1
    dportillo23•260
    @dportillo23
    Posted almost 3 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub