Skip to content
OverviewSolutions
5
Comments
3
Hau Nguyen
@haunguyen1064

All comments

  • Hau Nguyen•85
    @haunguyen1064Posted over 3 years ago

    hey,

    Well done!

    You should add a width:{number}px; on your card element to prevent from changing card 's width while changing input range

    0
  • Vatsal Singh•240
    @vatsalsinghkvSubmitted over 3 years ago

    I faced majorly two problems here.

    • First was while changing colour of slider's (range's) background according to its value, I couldn't figure out how to achieve it, so I made a div and fixed it on the slider's track and changed it's width using JavaScript, which I don't find efficient solution.
    <div class="slide-bar">
    <input type="range" id="slider" min="1" max="5">
    <div class="slider-bg"></div>
</div>

    .slide-bar {
    position: relative;
}

#slider {
    width: 100%;
    -webkit-appearance: none;
}
.slider-bg {
    left: 0;
    height: 8px;
    width: 50%;
    position: absolute;
}

    let $slider = $('#slider');
let $sliderBg = $('.slider-bg');

$slider.change(function() {
    $sliderBg.width(`${(this.value * 25) - 25}%`);
});
    • Second, my JS Script responds too late, like when I change the slider it takes some time to reflect back the changes.

    Suggestions & Corrections are most welcomed.

    Interactive Pricing Component using Flexbox & jQuery

    1
    Hau Nguyen•85
    @haunguyen1064Posted over 3 years ago

    Dear,

    These two problem can be solved by replacing $slider.change by $slider.oninput. It will response faster.

    You can check my javascript here (https://github.com/haunguyen1064/interactive-pricing-component-main/blob/master/index.js)

    0
  • Elizabeth Okuta•150
    @MimieveshofuoSubmitted over 3 years ago

    Please I need feedback on how to make the email return the error message when a wrong email is inserted. Thanks.

    HTML, CSC FLEX

    2
    Hau Nguyen•85
    @haunguyen1064Posted over 3 years ago

    Very good work! I give up when building mobile version, it was a mess. May I ask how long it takes you to finish this project?

    0