Wie macht man horizontale Linien durch andere Elemente?

Question

Wie ich horizontale Linien, die durch Schieber wie in diesem Bild machen kann: (https://www.audiolabs-erlangen.de/resources/webMUSHRA)

Zusätzlich, wie diese Art der Schnittstelle (feste Höhe zum Beispiel oder Prozentsatz) getan werden soll. Sollte es auf Tabelle basieren? Momentan habe ich so etwas basierend auf dem Flusslayout (angular2-flex), aber ich weiß nicht wie ich diese horizontalen Linien machen soll.

Code:

<div class="flex-item hmax-percentage" fx-flex="80"> 
         <div class="flex-container hmax-percentage" fx-layout="row" fx-layout-align="center stretch"> 
          <div class="flex-item"> 
           <div class="flex-container" fx-layout="column" 
            fx-layout-align="space-around stretch" style="height:80%"> 
            <pre class="flex-item" fx-flex="20"> 80-100 - Excellent</pre> 
            <pre class="flex-item" fx-flex="20"> 60-80 - Good</pre> 
            <pre class="flex-item" fx-flex="20"> 40-60 - Fair</pre> 
            <pre class="flex-item" fx-flex="20"> 20-40 - Poor</pre> 
            <pre class="flex-item" fx-flex="20"> 0-20 - Bad</pre> 
           </div> 
          </div> 
          <template ngFor let-sample [ngForOf]="samplesKeyMap"> 
           <sample-slider class="flex-item hmax-percentage" [sampleKey]="sample.currentSampleKey" 
               (onChangeEvent)="onSampleSliderChangeHandler($event)" 
               (onButtonClick)="onSampleSelectToPlay($event)"></sample-slider> 
          </template> 
         </div> 
        </div> 

Plunker: http://plnkr.co/edit/G4RK8T4OMPzs1E0Gcoaj?p=preview

Answer 1

I horizontalen Gitterlinien unter Verwendung von divs (Höhe: 2px; Hintergrund-Farbe: schwarz; Breite: 100%;) erreicht haben, mit der absoluten Positionierung und Prozent Top-Übersetzung. In meinem Fall gibt es 5 Zeilen und mein Container für Schieberegler ist 90% Höhe, so der Übersetzungsfaktor ist 90/5 = 16%.

<div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch"> 

    <div style="position: relative; height:100%;" class="fx-flex"> 

    <div style="position: absolute; top:0%; width: 100%; height:2px; background-color:black;"> 
    </div> 
    <div style="position: absolute; top:16%; width: 100%; height:2px; background-color:black;"> 
    </div> 
    <div style="position: absolute; top:32%; width: 100%; height:2px; background-color:black;"> 
    </div> 
    <div style="position: absolute; top:48%; width: 100%; height:2px; background-color:black;"> 
    </div> 
    <div style="position: absolute; top:64%; width: 100%; height:2px; background-color:black;"> 
    </div> 
    <div style="position: absolute; top:80%; width: 100%; height:2px; background-color:black;"> 
    </div> 

    <div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch"> 

     <template ngFor let-sample [ngForOf]="samplesKeyMap"> 
     <sample-slider class="flex-item hmax-percentage"></sample-slider> 
     </template> 
    </div> 
    </div> 

Demo: https://plnkr.co/edit/t1OL23PZcTgTE9DoSfLY?p=preview