イオン2レンジのラベル

Question

私はあなたが次のマークアップを使用して、最初と最後にラベルを追加することができます

（のドキュメントがhttp://ionicframework.com/docs/v2/api/components/range/Range/で見つけることができます）イオン2範囲の要素にいくつかのラベルを追加するために探しています

<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> 

しかし私は、可能な場合、それはより多くのプログレスバーのように見えるようにするための試みのいずれかの側に、範囲全体でいくつかのラベルを追加したいと思います。 25％、50％などのラベルが付いている可能性があります。

Ionic HTMLをあまり干渉しないで、これにアプローチするにはどうすればよいでしょうか？

これまでのところ、範囲を超えてイオン列を作成してから、それを配置するためにcssを使用しました。道の仕事でない

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; 
    } 

は、しかし、私はそれについて移動するためのより良い/きれいな方法は多分あります考えています。

アドバイスは素晴らしいでしょう。

ありがとうございます！

Answer 1

pin = "true"（スライダタグの範囲内）を設定しないと、基本的に何をしますか？ スライダの現在の値がプログレスバーのように表示されます。

特定のポイントの下に指定されたラベルの数を増やすことを検討している場合は、範囲スライダの直下に範囲を含むdivを追加してからCSSを使用して、あなたが欲しいもの。

主なCSSの問題は、Range要素の周囲の余白や余白を削除してから、フォントのサイズと右端の「進捗状況」の間隔を取得することです。

例えば、

<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>