Angular Slider

by Dor Cohen

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  {{level}}
  <div class="legend-value">
    <div class="selector-mark" ng-style="{'left': level + '%'}" ng-mousedown="dragStarted($event)"></div>
    <div class="color-container red" ng-style="{'left': level + '%',
        'width': 100 - level + '%'}"></div>
    <div class="empty"></div>
  </div>
</div>

CSS

.legend-value {
  width: 200px;
  height: 4px;
  margin-top: 12px;
  margin-left: 10px;
  position: relative;
  display: inline-box;
}

.selector-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 3px solid lightgray;
  border-radius: 50%;
  background-color: darkgray;
  z-index: 4;
  transform: translate(-10px, -6px);
}

.color-container {
  height: 4px;
  z-index: 2;
  position: absolute;
  background-color: red;
}

.empty {
  background-color: grey;
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $document) {
  $document[0].addEventListener('mouseup', dragEnded);
  $scope.level = 50;
  var mousmove = function(event) {
    $scope.$apply(function() {
      $scope.dragInProgress(event);
    });
  };
  var target;
  $scope.dragStarted = function(event) {
    target = event.target;
    $document[0].addEventListener('mousemove', mousmove);
    $scope.inProgress = true;
  };

  $scope.dragInProgress = function(event) {
    if ($scope.inProgress) {

      var containerBox = target.parentNode.getBoundingClientRect();
      var space = containerBox.width;
      var x = event.clientX;
      var percentage = (Math.min(Math.max(containerBox.left, x), containerBox.right) - containerBox.left) / space;
      $scope.level = Math.floor(percentage * 100);
    }
  };

  function dragEnded() {
    $scope.inProgress = false;
    $document[0].removeEventListener('mousemove', mousmove);
  }
}