Make 32 Hrs range in RZSlider in Angular Js?

Question

I have to implement one RZSlider with 10 minutes interval with 32Hrs. I am using date picker also. So I set this date picker and time slider into one html page. If when I la

Answer 1

I'm not completely clear on what you're after but hopefully this will set you on the right track.

I'm using Moment to make working with dates easier.

By including the day in the range value it makes the value unique so we can set the initial start and end times without ambiguity.

You can then use Moment to transform selected values back into date objects when you're ready to do something with the values.

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  
  var startDate, endDate, startTime, endTime;
  var currentDate = moment();
  
  var timeData = getRange();
  $scope.localTime = timeData.currentTime; // actually start of this hour
  
  var arr = timeData.times.map(n => {
    return {
      value: n.value
      //legend: n.value
    };
  });
  
  $scope.slider = {
    minValue: $scope.localTime.clone().subtract(4, "hours").format('MMM Do hh:mma'),
    maxValue: $scope.localTime.clone().add(4, "hours").format('MMM Do hh:mma'),
    options: {
      showTicks: true,
      stepsArray: arr,
      draggableRange: true,
    }
  };
});

function getRange(currentDate) {
  var arr = [];
  var totalHourRange = 28;
  var currentTime = 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('MMM Do hh:mma'), offset: i * 10});
    tmpTime.add(10, 'minutes');
  }
  return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h2>AngularJS Touch Slider</h2>
    </header>
    <article>
      <h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4>
      <br />
      Model:
      <input type="text" ng-model="slider.minValue" />
      <input type="text" ng-model="slider.maxValue" />
      <br />
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

Updated demo: http://jsfiddle.net/stxa9hrp/1/