html input range style using background-image - html

Question

I ma trying to style input range and progress. The issue is they are not aligned on top of each other. I dont want to use margin-top on -webkit-slider-runnable-track because I found it doesnt work in some cases (depending on where parent element is positioned).
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
}
.load-level {
position: absolute;
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 50px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}
<div class="seekbar-wrap">
<progress class="load-level" min="0" max="100" role="progressbar" value="44.11733725" aria-hidden="true">% buffered</progress>
<input class="input-progress" type="range" min="0" max="100" step="0.01" autocomplete="off" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="235" aria-valuenow="17.052851513822205" value="0" aria-valuetext="00:01 of 00:20" style="user-select: none; touch-action: manipulation;">
</div>

Answer 1

I don't know if I fully understood what you mean, but maybe this CSS code could help:
:root {
--value: 30%;
}
.seekbar-wrap{
background: #353b49;
}
.seekbar {
overflow: hidden;
height: 50px;
cursor: pointer;
flex: 1;
}
.seekbar-wrap {
position: relative;
margin: 0 10px;
height: 50px;
display:flex;
}
.load-level {
/* position: absolute; */
top: 23px;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
height: 5px;
left: 0;
padding: 0;
}
.load-level::-webkit-progress-bar{
background:none;
}
.load-level::-webkit-progress-value{
background-color:#b6bfc1;
}
.load-level::-moz-progress-bar{
background-color:#b6bfc1;
}
.input-progress {
position: absolute;
width: 100%;
left: 0;
top: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: 0 0;
border: 0;
color: #62768f;
margin: 0;
min-width: 0;
padding: 0;
}
.input-progress::-webkit-slider-runnable-track {
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
height: 5px;
-webkit-user-select: none;
user-select: none;
}
.input-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 0;
width: 0;
height: 0;
}
.input-progress::-moz-range-track {
height: 5px;
border: 0;
background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
}
.input-progress::-moz-range-progress {
}
.input-progress::-moz-range-thumb {
appearance: none;
background: #fff;
border: 0;
height: 0;
width: 0;
}