HTML, CSS and JS only

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  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)! 😁

  1

  ---

  

  JP Yepez•55

  @jpyepezPosted almost 4 years ago

  @ApplePieGiraffe Hey, thanks for the kind words! Really appreciate the support, see you around! :)

  0
• 

  Erik Tangvik•255

  @Etang131Posted almost 4 years ago

  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?

  1

  ---

  

  JP Yepez•55

  @jpyepezPosted almost 4 years ago

  @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!

  1

  

  Erik Tangvik•255

  @Etang131Posted almost 4 years ago

  @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.

  1