Responsive page using CSS adn flexbox

Community feedback

• 

  noor•540

  @MaahnoorPosted over 2 years ago

  the progress slider has to be styled for firefox separately, that's why it's not showing.

  in this case, you don't need to use input tag you can make the bar with simple nested divs

  <div id="myProgress"> <div id="myBar"><span class="end-circle"></span>></div> </div>

  and style it

  #myProgress { width: 100%; background-color: var(--VeryDarkBlue); height: 20px; border-radius: 20px; margin: 16px 0 12px 0; }

  #myBar { width: 81.5%; background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%)); border: 2px solid var(--VeryDarkBlue); color: transparent; border-radius: 20px; display: flex; justify-content: flex-end; align-items: center; position: relative; } .end-circle{ position: absolute; right:3px; background-color: white; width: 12px; height: 12px; border-radius: 50%; }

  you can check my solution for help

  Marked as helpful

  1
• 

  Michał Chmiel•190

  @xgunzoPosted over 2 years ago

  I don't know why, but in the screenshot there is no progress slider and no min and max values of the range

  0