Ionic 2 Range Mit Labels

Question

Suche einiger Etiketten zu einem ionischen 2 Bereich Element hinzufügen

Sie ein Etikett am Anfang und Ende hinzufügen kann mit dem folgenden Markup (die Dokumentation, für die bei http://ionicframework.com/docs/v2/api/components/range/Range/ zu finden)

<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary"> 
     <!-- Setting the labels here -->  
     <ion-label range-left>-200</ion-label> 
     <ion-label range-right>200</ion-label> 
    </ion-range> 

ich jedoch einige Etiketten über den gesamten Bereich hinzufügen möchte, auf beiden Seiten, wenn möglich, in einem Versuch, es eher wie ein Fortschrittsbalken aussehen. So könnten Sie Etiketten wie 25%, 50% usw. haben.

Was wäre ein guter Weg, um dies zu erreichen, ohne zu viel mit dem Ionic HTML zu stören?

Mein Ansatz ist bisher nur eine Ionenreihe über dem Bereich zu erstellen, dann benutze CSS um sie zu platzieren.

HTML

<!-- TIMELINE --> 
    <div class='timeline'> 
     <ion-grid class="timeline-grid"> 

     <ion-row class="timeline-labels"> 
      <ion-col width-20>Label One</ion-col> 
      <ion-col width-20>Label Two</ion-col> 
      <ion-col width-20>Label Three</ion-col> 
      <ion-col width-20>Label Four</ion-col> 
      <ion-col width-20>Label Five</ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col> 
      <ion-item> 
       <ion-range color='secondary' [(ngModel)]="progress"> 
       </ion-range> 
      </ion-item> 
      </ion-col> 
     </ion-row> 

     </ion-grid> 
    </div> 

CSS

ion-row.timeline-labels { 
    padding-left: 20px; 
    z-index: 1; 
    position: absolute; 
    top: 10px; 
    } 

, die in einer Art und Weise funktioniert, jedoch denke ich sich vielleicht ein besserer/sauberer Weg, um darüber zu gehen.

Jeder Rat wäre toll.

Danke!

Answer 1

Würde nicht setzen Sie den Pin = "True" (im Bereich Slider-Tag) im Grunde tun, was Sie wollen? Es würde den aktuellen Wert des Schiebereglers wie ein Fortschrittsbalken zeigen würde.

Wenn Sie an bestimmten Punkten mehr von einem bestimmten Label an der Unterseite erreichen möchten, wäre der beste Weg, ein div mit Spannen direkt unter dem Bereichsschieber hinzuzufügen und dann mit dem CSS zu spielen, bis es nah genug ist was du willst.

Haupt-CSS-Probleme werden Padding oder Randabstand um das Range-Element entfernen und dann die Schriftgröße und den Abstand des "Fortschritts" an den richtigen Stellen erhalten.

z.

<ion-range min="0" max="100" pin="true"> 
     <!-- Setting the labels here -->  
     <ion-label range-left>0</ion-label> 
     <ion-label range-right>100</ion-label> 
    </ion-range> 
    <div> 
     <span>20%<span> 
     <span>40%<span> 
     <span>80%<span> 
     <span>100%<span> 
    </div>