Slider

<div class="container">
<!-- Left side -->
<!-- Width based on the current value -->
<div class="container__left" style="width: 20%"></div>
<!-- Circle -->
<div class="container__circle"></div>
<!-- Right side -->
<div class="container__right"></div>
</div>
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
/* Size */
height: 32px;
}
.container__left {
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__circle {
/* Size */
height: 32px;
width: 32px;
/* Rounded border */
border-radius: 9999px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}
.container__right {
/* Take the remaining width */
flex: 1;
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
}