var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);

​

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {

  $scope.$watch('dateBirth', function(n, o) {

    var middleDay = n || new Date();

    middleDay.setHours(12);

    $scope.selectedDate = moment(middleDay);

    $scope.init();

  });

  $scope.init = function() {

    var startDate, endDate, startTime, endTime;

    var timeData = getRange($scope.selectedDate);

    $scope.localTime = timeData.currentTime; // actually start of this hour

    var arr = timeData.times.map(n => {

      return {

        value: n.value

        //legend: n.value

      };

    });

    $timeout(function(){

      $scope.slider = {

        minValue: $scope.localTime.clone().subtract(4, "hours").format('DD MMM HH:mm'),

        maxValue: $scope.localTime.clone().add(4, "hours").format('DD MMM HH:mm'),

        options: {

          showTicks: true,

          stepsArray: arr,

          draggableRange: true,

        }

      };

    });

  }

  $scope.init();

});

​

function getRange(currentDate) {

  var arr = [];

  var totalHourRange = 32;

  var currentTime = currentDate || moment(); // current date and time using Moment

  // set current time to beginning of the hour

  currentTime.minute(0);

  // clone date and substract 1/2 total range to get start point

  var tmpTime = currentTime.clone();

  tmpTime.subtract(totalHourRange / 2, 'hours');

  // offset is the number of minutes from the current point

  for (var i = -6 * (totalHourRange / 2); i <= 6 * (totalHourRange / 2); i++) {

    arr.push({value: tmpTime.format('DD MMM HH:mm'), offset: i * 10});

    console.log(tmpTime.format('DD MMM HH:mm'));

    tmpTime.add(10, 'minutes');

  }

  return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };

}