angularjs - Set time using range slider

Question

I'm trying to use ionic range to set a period of time with a step of 15minutes. Ionic range works just like a common range input with min,max, step, value.

Here's the range html code:

<div class="item range">
  <input type="range" min="0.15" max="12" value="0" step="0.15" ng-model="TimeValue" ng-change="setTime(TimeValue)">
</div>

And here's the function that i'm calling on change:

$scope.setTime = (value) ->
   $scope.hours = Math.floor(value / 0.6);
   $scope.minutes = value - ($scope.hours * 0.6);

Unfortunately, this is not working.

What I'm trying to achieve is a slider with a step of 0.15(minutes) that automatically creates an hour when it gets to 0.6 and than it starts again at 1.15(hours) and so on.

I'm following this answer here: using ionic range to set months and years but that's for years and months and the calculation is different.

Here's a quick demo: http://codepen.io/anon/pen/eZVPRv?editors=1010

EDIT

New demo: http://codepen.io/anon/pen/eZVPRv?editors=1010

If you slide, it sets hours and minutes, but the values (specially minutes) is wrong. It is right the first step (up until 1 hours) but then it goes to 0.15000000002 - 0.30000000004 - 0.45000000007 and so on, increasing continuously. This may lead to delays and I need this to be really precise — Nick

Himanshu Aggarwal Himanshu Aggarwal · Accepted Answer · 2016-04-12T09:35:47

Use the below code buddy, hope this what you needed-

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', ['$scope', function($scope){    
  $scope.setTime = function (value) {
    $scope.hours = Math.floor(value / 0.6);
  if(($scope.TimeValue % 0.6) == 0 ){
    $scope.minutes = 0;
    }else{
      if($scope.TimeValue <= .6){
        $scope.minutes = Math.round((value - ($scope.hours))*100);  
      }else{
        value = Math.round((value - ($scope.hours * .6))*100);
        $scope.minutes = value;
      }
    }
  }
  $scope.TimeValue = 0.15;
}])

There were calculation issue, check it here- http://codepen.io/himanshuapril1/pen/eZVPXe?editors=1010

angularjs - Set time using range slider

1 Answers