CSS Sound bar behind input slider

Issue

I have a problem. I created the following HTML page:

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fa-play, .fa-pause {
    font-size: 20px;
    margin-right: 15px;
}

#progress-bar {
    flex: 1;
    position: relative;
    z-index: 1;
}

#sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    width: 100%;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #153725;
}




/* SOUND BAR ANIMATION */
.animate-bars {
     display: flex;
     align-items: center;
     width: 100%;
     height: 20px;
     overflow: hidden;
     position: relative;
}
 .animate-bars div {
     flex: 1 0 auto;
     height: 100%;
     margin: 0 -2px;
     background-color: #90416b;
     animation: animate-bar 300ms linear infinite alternate;
     transform-origin: bottom;
     opacity: 0;
}
 .animate-bars div:first-child {
     margin-left: 0;
}
 .animate-bars div:last-child {
     margin-right: 0;
}
 .animate-bars div:nth-child(1) {
     animation-duration: 701ms;
     animation-delay: 333ms;
}
 .animate-bars div:nth-child(2) {
     animation-duration: 569ms;
     animation-delay: 199ms;
}
 .animate-bars div:nth-child(3) {
     animation-duration: 677ms;
     animation-delay: 279ms;
}
 .animate-bars div:nth-child(4) {
     animation-duration: 781ms;
     animation-delay: 152ms;
}
 .animate-bars div:nth-child(5) {
     animation-duration: 516ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(6) {
     animation-duration: 541ms;
     animation-delay: 21ms;
}
 .animate-bars div:nth-child(7) {
     animation-duration: 387ms;
     animation-delay: 352ms;
}
 .animate-bars div:nth-child(8) {
     animation-duration: 691ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(9) {
     animation-duration: 612ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(10) {
     animation-duration: 781ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(11) {
     animation-duration: 587ms;
     animation-delay: 426ms;
}
 .animate-bars div:nth-child(12) {
     animation-duration: 375ms;
     animation-delay: 418ms;
}
 .animate-bars div:nth-child(13) {
     animation-duration: 400ms;
     animation-delay: 236ms;
}
 .animate-bars div:nth-child(14) {
     animation-duration: 645ms;
     animation-delay: 81ms;
}
 .animate-bars div:nth-child(15) {
     animation-duration: 379ms;
     animation-delay: 195ms;
}
 .animate-bars div:nth-child(16) {
     animation-duration: 561ms;
     animation-delay: 424ms;
}
 .animate-bars div:nth-child(17) {
     animation-duration: 384ms;
     animation-delay: 31ms;
}
 .animate-bars div:nth-child(18) {
     animation-duration: 704ms;
     animation-delay: 265ms;
}
 .animate-bars div:nth-child(19) {
     animation-duration: 464ms;
     animation-delay: 88ms;
}
 .animate-bars div:nth-child(20) {
     animation-duration: 589ms;
     animation-delay: 447ms;
}
 .animate-bars div:nth-child(21) {
     animation-duration: 713ms;
     animation-delay: 207ms;
}
 .animate-bars div:nth-child(22) {
     animation-duration: 782ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(23) {
     animation-duration: 610ms;
     animation-delay: 493ms;
}
 .animate-bars div:nth-child(24) {
     animation-duration: 371ms;
     animation-delay: 249ms;
}
 .animate-bars div:nth-child(25) {
     animation-duration: 481ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(26) {
     animation-duration: 746ms;
     animation-delay: 65ms;
}
 .animate-bars div:nth-child(27) {
     animation-duration: 382ms;
     animation-delay: 165ms;
}
 .animate-bars div:nth-child(28) {
     animation-duration: 592ms;
     animation-delay: 71ms;
}
 .animate-bars div:nth-child(29) {
     animation-duration: 600ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(30) {
     animation-duration: 401ms;
     animation-delay: 174ms;
}
 .animate-bars div:nth-child(31) {
     animation-duration: 606ms;
     animation-delay: 271ms;
}
 .animate-bars div:nth-child(32) {
     animation-duration: 515ms;
     animation-delay: 363ms;
}
 .animate-bars div:nth-child(33) {
     animation-duration: 405ms;
     animation-delay: 122ms;
}
 .animate-bars div:nth-child(34) {
     animation-duration: 448ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(35) {
     animation-duration: 439ms;
     animation-delay: 246ms;
}
 .animate-bars div:nth-child(36) {
     animation-duration: 429ms;
     animation-delay: 470ms;
}
 .animate-bars div:nth-child(37) {
     animation-duration: 565ms;
     animation-delay: 287ms;
}
 .animate-bars div:nth-child(38) {
     animation-duration: 462ms;
     animation-delay: 103ms;
}
 .animate-bars div:nth-child(39) {
     animation-duration: 590ms;
     animation-delay: 442ms;
}
 .animate-bars div:nth-child(40) {
     animation-duration: 444ms;
     animation-delay: 181ms;
}
 .animate-bars-center div {
     transform-origin: center;
}
 @keyframes animate-bar {
     0% {
         transform: scaleY(0);
         opacity: 0.8;
    }
     100% {
         transform: scaleY(100%);
         opacity: 0.4;
    }
}
<div class="audio-control">
    <button id="btnPlay" (click)="onPlayClick()" value="play"><i class="fas fa-play"></i></button>
    <span id="current-time" class="time">0:00</span>

    <!-- Animate from bottom -->
    <div class="audio-bars">
        <div id="sound-bars">
            <div class="animate-bars">
                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            </div>
        </div>
        <input type="range" id="progress-bar" max="93" value="0" (input)="onProgressChange()">
    </div>

    <span id="duration" class="time">1:33</span>
</div>

The problem is that the soundbar and the progress bar are being placed next to each other, while I want them to overlap. The sound-bar must be placed behind the progress-bar and the sound-bar must be as wide as the progress-bar. This page also needs to be responsive, so changing the page width, must maintain the relation between the 2 bars. Here is the result I have now:
enter image description here

How can I achieve what I want?

Solution

I would position the range input field absolute, so that the underlying bars themselves determine the width. (They go over the full available width here, but this way it should work in other situations as well, like if .audio-bars got flex:50% instead or something.)

If the input goes a bit to far to the right, then try and use width: calc(100% - ...) to compensate for margins etc.

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fa-play, .fa-pause {
    font-size: 20px;
    margin-right: 15px;
}

#progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}

#sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
    background: red;
    position: relative;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #153725;
}




/* SOUND BAR ANIMATION */
.animate-bars {
     display: flex;
     align-items: center;
     width: 100%;
     height: 20px;
     overflow: hidden;
     position: relative;
}
 .animate-bars div {
     flex: 1 0 auto;
     height: 100%;
     margin: 0 -2px;
     background-color: #90416b;
     animation: animate-bar 300ms linear infinite alternate;
     transform-origin: bottom;
     opacity: 0;
}
 .animate-bars div:first-child {
     margin-left: 0;
}
 .animate-bars div:last-child {
     margin-right: 0;
}
 .animate-bars div:nth-child(1) {
     animation-duration: 701ms;
     animation-delay: 333ms;
}
 .animate-bars div:nth-child(2) {
     animation-duration: 569ms;
     animation-delay: 199ms;
}
 .animate-bars div:nth-child(3) {
     animation-duration: 677ms;
     animation-delay: 279ms;
}
 .animate-bars div:nth-child(4) {
     animation-duration: 781ms;
     animation-delay: 152ms;
}
 .animate-bars div:nth-child(5) {
     animation-duration: 516ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(6) {
     animation-duration: 541ms;
     animation-delay: 21ms;
}
 .animate-bars div:nth-child(7) {
     animation-duration: 387ms;
     animation-delay: 352ms;
}
 .animate-bars div:nth-child(8) {
     animation-duration: 691ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(9) {
     animation-duration: 612ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(10) {
     animation-duration: 781ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(11) {
     animation-duration: 587ms;
     animation-delay: 426ms;
}
 .animate-bars div:nth-child(12) {
     animation-duration: 375ms;
     animation-delay: 418ms;
}
 .animate-bars div:nth-child(13) {
     animation-duration: 400ms;
     animation-delay: 236ms;
}
 .animate-bars div:nth-child(14) {
     animation-duration: 645ms;
     animation-delay: 81ms;
}
 .animate-bars div:nth-child(15) {
     animation-duration: 379ms;
     animation-delay: 195ms;
}
 .animate-bars div:nth-child(16) {
     animation-duration: 561ms;
     animation-delay: 424ms;
}
 .animate-bars div:nth-child(17) {
     animation-duration: 384ms;
     animation-delay: 31ms;
}
 .animate-bars div:nth-child(18) {
     animation-duration: 704ms;
     animation-delay: 265ms;
}
 .animate-bars div:nth-child(19) {
     animation-duration: 464ms;
     animation-delay: 88ms;
}
 .animate-bars div:nth-child(20) {
     animation-duration: 589ms;
     animation-delay: 447ms;
}
 .animate-bars div:nth-child(21) {
     animation-duration: 713ms;
     animation-delay: 207ms;
}
 .animate-bars div:nth-child(22) {
     animation-duration: 782ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(23) {
     animation-duration: 610ms;
     animation-delay: 493ms;
}
 .animate-bars div:nth-child(24) {
     animation-duration: 371ms;
     animation-delay: 249ms;
}
 .animate-bars div:nth-child(25) {
     animation-duration: 481ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(26) {
     animation-duration: 746ms;
     animation-delay: 65ms;
}
 .animate-bars div:nth-child(27) {
     animation-duration: 382ms;
     animation-delay: 165ms;
}
 .animate-bars div:nth-child(28) {
     animation-duration: 592ms;
     animation-delay: 71ms;
}
 .animate-bars div:nth-child(29) {
     animation-duration: 600ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(30) {
     animation-duration: 401ms;
     animation-delay: 174ms;
}
 .animate-bars div:nth-child(31) {
     animation-duration: 606ms;
     animation-delay: 271ms;
}
 .animate-bars div:nth-child(32) {
     animation-duration: 515ms;
     animation-delay: 363ms;
}
 .animate-bars div:nth-child(33) {
     animation-duration: 405ms;
     animation-delay: 122ms;
}
 .animate-bars div:nth-child(34) {
     animation-duration: 448ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(35) {
     animation-duration: 439ms;
     animation-delay: 246ms;
}
 .animate-bars div:nth-child(36) {
     animation-duration: 429ms;
     animation-delay: 470ms;
}
 .animate-bars div:nth-child(37) {
     animation-duration: 565ms;
     animation-delay: 287ms;
}
 .animate-bars div:nth-child(38) {
     animation-duration: 462ms;
     animation-delay: 103ms;
}
 .animate-bars div:nth-child(39) {
     animation-duration: 590ms;
     animation-delay: 442ms;
}
 .animate-bars div:nth-child(40) {
     animation-duration: 444ms;
     animation-delay: 181ms;
}
 .animate-bars-center div {
     transform-origin: center;
}
 @keyframes animate-bar {
     0% {
         transform: scaleY(0);
         opacity: 0.8;
    }
     100% {
         transform: scaleY(100%);
         opacity: 0.4;
    }
}
<br><br>
<div class="audio-control">
    <button id="btnPlay" (click)="onPlayClick()" value="play"><i class="fas fa-play"></i></button>
    <span id="current-time" class="time">0:00</span>

    <!-- Animate from bottom -->
    <div class="audio-bars">
        <div id="sound-bars">
            <div class="animate-bars">
                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            </div>
        </div>
        <input type="range" id="progress-bar" max="93" value="0" (input)="onProgressChange()">
    </div>

    <span id="duration" class="time">1:33</span>
</div>

Answered By – CBroe

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published