title: using ionic range to set months and years
body: <p>I am using a ionic range in my html page to set the number of months.It looks like this</p>
  
  <p><img src="https://i.stack.imgur.com/Fxv11.jpg" alt="enter image description here"></p>
  
  <p>I want this to display as years and months when i slide the ionic range. 
  Ex: first months goes upto 12 and automatically becomes a year.How can i acheive this?</p>
  
  <p>My html code for ionic range</p>
  
  <pre><code>&lt;p&gt;&lt;label class="labelCalhead"&gt;  Select your Loan Term :&lt;/label&gt;&lt;/p&gt;
              &lt;div class="item range"&gt;
                  &lt;input type="range" name="volume" min="1" max="30"  ng-model="loanTerm" &gt;&lt;/div&gt;
              &lt;label class="labelCal"&gt;Monthly&lt;/label&gt;
              &lt;p&gt;&lt;input type="text" decimal-places ng-model="loanTerm" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57 || event.charCode == 46' min="0" max="30" STYLE="color: #72A4D2; " /&gt;&lt;/p&gt;&lt;br&gt;
  </code></pre>
  
  <p>To be Precise i want to do something like this</p>
  
  <p><img src="https://i.stack.imgur.com/WHqch.jpg" alt="enter image description here"></p>