Using the ionic range to set months and years
I am using ionic range in my html page to set the number of months. It looks like
I want this to display as years and months when I push the ion range. Example: The first months go up to 12 and automatically become a year. How can I figure this out?
My html code for ionic range
<p><label class="labelCalhead"> Select your Loan Term :</label></p>
<div class="item range">
<input type="range" name="volume" min="1" max="30" ng-model="loanTerm" ></div>
<label class="labelCal">Monthly</label>
<p><input type="text" decimal-places ng-model="loanTerm" onkeypress='return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46' min="0" max="30" STYLE="color: #72A4D2; " /></p><br>
To be precise, I want to do something like this
+3
source to share
1 answer
I'll give you the simplest code to show you how to do this, then you can add text fields like in the UI above.
In the controller define the following function and also run the initial value for the slider
$scope.drag = function(value) {
$scope.years = Math.floor(value / 12);
$scope.months = value % 12;
};
$scope.rangeValue = 0;
Then in your template
<input type="range" name="volume" min="0" max="100" ng-model="rangeValue" ng-change="drag(rangeValue)">
<div>Total: {{rangeValue}} Years: {{years}} Months: {{months}}</div>
Now when you drag the range entry, it will show years and months.
+5
source to share