Home > Back-end >  CSS Sound bar behind input slider
CSS Sound bar behind input slider

Time：10-18

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Overlapping elements in Flexbox is a bit besides the point of Flexbox. The solution I would suggest is CSS grid, where you can specify a 1x1 responsive grid, then affix these elements to the single node that you just created.

However, in Flexbox as in normal css, you are able to add a position:absolute; to the parent elements and enforce positioning, then float the soundbars behind with a position:relative. The rest of the problem should just be general styling.

.audio-control {
    display: flex;
    width:300px;
    position: absolute;
    margin: 10px 5px;
}

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

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

#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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Backend/156921.html

Prev:Developing for accessibility and I am being told <li> "List item does not have a <ul&g
Next:How to check html table cell value in every rows and columns
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding