fylo-data-storage-component

Visit this link to help you better understand ranges styling ranges

Good job there, i guess the above suggestions should help.

Hey @maaghia,

To do style the progress bar you can set a parent div which contains ::after pseudo elements it's very useful to style those kind of things.

The parent div will be set on relative position and ::after on absolute position then you can style it like the design.

The white circle is very easy to do I'll let you think about it you've done a good job I'm sure you will find the solution for it .

More details here :

:: AFTER https://developer.mozilla.org/en-US/docs/Web/CSS/::after

POSITION ABSOLUTE , RELATIVE https://developer.mozilla.org/en-US/docs/Web/CSS/position

In hope it helps !

Hey @maaghia, good work out there, in response to your concern here is what you can do :

1. Take a <div></div> element and set height, width and padding of it as appropriate.
2. Nest the <div></div> element created in step 1 with another <div></div element and set height less than the parent <div></div> also use gradient background-color, again set the padding as appropriate. And set position:relative;
3. Again nest the <div></div created in step 2 with another <div></div> element and set the

border-radius: 50px;
position:absolute;
right: 0 ;
margin-right: 5px;  

Note: You might need to add some other CSS properties as per requirement, but the above step will definitely help you with the range stuff. Also there can be other ways, but in my opinion and challenge i performed the same. Hope you will find this solution helpful. Happy coding.