title: Ionic 2 Range With Labels
body: <p>I am looking to add some labels to an Ionic 2 range element (the documentation for which can be found at <a href="http://ionicframework.com/docs/v2/api/components/range/Range/" rel="nofollow noreferrer">http://ionicframework.com/docs/v2/api/components/range/Range/</a>)</p>
  
  <p>You can add a label at the beginning and end using the following markup</p>
  
  <pre><code>    &lt;ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary"&gt;
        &lt;!-- Setting the labels here --&gt;      
        &lt;ion-label range-left&gt;-200&lt;/ion-label&gt;
        &lt;ion-label range-right&gt;200&lt;/ion-label&gt;
      &lt;/ion-range&gt;
  </code></pre>
  
  <p>I would however like to add some labels throughout the range, on either side if possible in an attempt to make it look more like a progress bar. So you might have labels like 25%, 50% etc .. </p>
  
  <p>What would be a good way to approach this, without interfering too much with the Ionic HTML?</p>
  
  <p>My approach so far is just to create an ion-row above the range, then use css to place it.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- TIMELINE --&gt;
      &lt;div class='timeline'&gt;
        &lt;ion-grid class="timeline-grid"&gt;
  
          &lt;ion-row class="timeline-labels"&gt;
            &lt;ion-col width-20&gt;Label One&lt;/ion-col&gt;
            &lt;ion-col width-20&gt;Label Two&lt;/ion-col&gt;
            &lt;ion-col width-20&gt;Label Three&lt;/ion-col&gt;
            &lt;ion-col width-20&gt;Label Four&lt;/ion-col&gt;
            &lt;ion-col width-20&gt;Label Five&lt;/ion-col&gt;
          &lt;/ion-row&gt;
  
          &lt;ion-row&gt;
            &lt;ion-col&gt;
              &lt;ion-item&gt;
                &lt;ion-range color='secondary' [(ngModel)]="progress"&gt;
                &lt;/ion-range&gt;
              &lt;/ion-item&gt;
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
  
        &lt;/ion-grid&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ion-row.timeline-labels {
      padding-left: 20px;
      z-index: 1;
      position: absolute;
      top: 10px;
    }
  </code></pre>
  
  <p>Which does in a way work, however I am thinking there is maybe a better/cleaner way to go about it.</p>
  
  <p>Any advice would be great.</p>
  
  <p>Thanks!</p>