@manjubhaskar02
Posted
Congratulations on taking up this challenge!
I think you can simply put this element..
This was my code.
HTML
<div class="progress-bar">
<div class="progress">
<div class="round"></div>
</div>
</div>
CSS
.progress-bar {
background-color: var(--Very-Dark-Blue);
width: 100%;
height: 18px;
border-radius: 50px;
padding: 0px 2px;
}
.progress {
background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
width: 75%;
height: 16px;
border-radius: 50px;
position:relative;
}
.round {
position: absolute;
background-color: white;
width: 15px;
height: 15px;
right: 0px;
border-radius: 100%;
}
I think just a class round and adding its styling inside the meter element will help you.
Hoping this would be helpful for you!
Happy Coding Journey!
@xyzeez
Posted
Thank you @manjubhaskar02.
Semantically, there is an HTML tag to achieve what you have in the .progress and .progress-bar class called <meter> , that is exactly what I have used.
Also, if you could see the SASS source code, you would see that I did something similar to what you did with the .round class only that yours is more dependent on the .progress class but like I said, I need to achieve that with the <meter> tag. How do I go about that?
@manjubhaskar02
Posted
@xyzeez ,Thanks for teaching me this element, I was unaware of that element.
The round range slider can be achieved by
meter::-webkit-meter-thumb
The ::-webkit-meter-thumb CSS pseudo-element is a WebKit extension that represents the thumb in a <meter> element. It is used for selecting and applying styles to the thumb of a meter gauge.
The following link will show a round-range slider using javascript.
But for just a design I tried to use this meter element without
meter::-webkit-meter-thumb
HTML
<section>
<div class="progress">
<meter id="disk" min="0" low="40" high="95" max="100" value="75" col>
</meter>
<div class="round"></div>
</div>
</section>
CSS
section{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: hsl(228, 56%, 26%);
}
#disk {
height: 60px;
width: 800px;
}
meter::-webkit-meter-optimum-value {
background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
::-webkit-meter-bar{
background-color: hsl(229, 57%, 11%);
height: 30px;
width: 100%;
}
.progress {
position: relative;
}
.round {
position: absolute;
border-radius: 100%;
left: 73%;
width: 26px;
height: 26px;
background-color: white;
bottom: 20px;
}
This worked for me for just a design!
@xyzeez
Posted
Thank you @manjubhaskar02 !
Could you please provide a resource link for the pseudo class you mentioned ::-webkit-meter-thumb ?
I've tried searching for it to better understand it but only found ::-webkit-slider-thumb (here).
I've also tried styling my code with what you provided but there seems to be no change at all, you've also not provided for firefor -moz
