Using Ionic Range To Set Months And Years

I am using a ionic range in my html page to set the number of months.It looks like this I want this to display as years and months when i slide the ionic range. Ex: first months

Solution 1:

I'll give you simplest code to show you how to do it, you can then add textboxes as in the UI above.

In the controller define following function and also init 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

<inputtype="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 input it will show the years and months.