time slider AngularJS Directive

This directive uses HTML 5 range input to create a slider for time values. Time is input as time since epoch and converted to Locale date/time strings. The current value of the slider moves with the slider.

by lsiv568

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
    <div ng-app="App" ng-controller="MyCtrl">
     <time-slider callback="layoutSliderChanged" min="layoutStartTimeMS" max="layoutEndTimeMS" step="60000"></time-slider>
    </div>
</body>

JavaScript

(function() {
  'use strict';
    
  angular.module('App', []).directive('timeSlider', function() {
    var updateCurrentTime, updateEndTime, updateStartTime;
    updateStartTime = function(span, value) {
      var sd, startDate, startTime;
      sd = new Date(value);
      startDate = sd.toLocaleDateString();
      startTime = sd.toLocaleTimeString();
      return span.innerHTML = startDate + ':' + startTime;
    };
    updateEndTime = function(span, value) {
      var ed, endDate, endTime;
      ed = new Date(value);
      endDate = ed.toLocaleDateString();
      endTime = ed.toLocaleTimeString();
      return span.innerHTML = endDate + ':' + endTime;
    };
    updateCurrentTime = function(span, value) {
      var cd, curDate, curTime;
      cd = new Date(value);
      curDate = cd.toLocaleDateString();
      curTime = cd.toLocaleTimeString();
      return span.innerHTML = curDate + ':' + curTime;
    };
    return {
      template: "<div><span>Start Time: </span><span class='startTime'></span>" + "<input type='range'></input><span>End Time:</span><span class='endTime'></span>" + "<div style='position: absolute' class='curTime'><span></span></div>" + "</div>",
      restrict: 'E',
      scope: {
        min: '=',
        max: '=',
        callback: '='
      },
      link: function(scope, element, attrs) {
        var adjusting, curTimeDiv, moveCurTimeDiv, rangeInput, rangeInputElement, rangeInputOffset, spans;
        rangeInput = element.find('input')[0];
        rangeInputElement = angular.element(rangeInput);
        spans = element.find('span');
        curTimeDiv = element.find('div')[1];
        rangeInputOffset = $(rangeInput).offset();
        adjusting = false;
        rangeInput.min = scope.min;
        rangeInput.max = scope.max;
        rangeInput.step = attrs.step;
        rangeInput.value = scope.min;
        updateStartTime(spans[1], rangeInput.min);
        updateEndTime(spans[3], rangeInput.max);
        moveCurTimeDiv = function(curValue) {
...