All comments

• 

  MaziluRO• 180

  @MaziluRO

  Submitted over 3 years ago

  I had a hard time trying to create the range slider. I created it by creating a range input, then removing the webkit design of it, then I created two more divs, one for background and one for progress and I changed the z-indexes like this: the slider has the highest z-index and its background is transparent, the progress div has the second highest index, and lastly, the background div has the lowest index. And with a little help from the Slack community I managed to change the width of the progress in JS. I would like to know if there is an easier way to change the background color of the slider but only the one from the left of the thumb?

  

  Fylo challenge using flex-box

  2

  1

  0

  

  Rahul Gupta• 80

  @rahulxyz

  Posted over 3 years ago

  Yes, the range slider can be overwhelming. What I did was, I used background property to add two different linear gradient. It can help you avoid the whole layered approach to it. However, I couldn't find a way to make it curved when the gradient color changes at the thumb.

  .slider { ... background: var(--half-transparent), var(--gradient); }

  Check my solution for more details. PS: You can also do the same trick to add background color and image to the same element.

  0

  This comment has received 1 replyShow
• 

  Adam Iqshan• 20

  @adamiqshan

  Submitted over 3 years ago

  I was successfully able to reproduce design but I couldn't make the share svg icon switch color on hover. Any comment on that is very appreciated.

  

  Article preview component

  2

  0

  0

  

  Rahul Gupta• 80

  @rahulxyz

  Posted over 3 years ago

  Wonderful work Adam. You can create two svg's with different fill colors and switch between them on hover or click.

  0