fylo-data-storage-component

Community feedback

• 

  Faruk Abdulganiyu•380

  @farukingPosted over 2 years ago

  Visit this link to help you better understand ranges styling ranges

  Marked as helpful

  1

  ---

  

  Maria•130

  @maaghiaPosted over 2 years ago

  @faruking thank you

  0
• 

  Saleem•220

  @ThesaleemPosted over 2 years ago

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

  1

  ---

  

  Maria•130

  @maaghiaPosted over 2 years ago

  @Thesaleem thanks

  0
• 

  Yokke•620

  @JexintePosted over 2 years ago

  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 !

  1
• 

  Manoj Kumar Singh•970

  @dev-mksinghPosted over 2 years ago

  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.

  0

  ---

  

  Maria•130

  @maaghiaPosted over 2 years ago

  @dev-mksingh I don't think the div trick would help since my question was about styling a range input not only a div, since I used a range input in there

  0