Angular: Empty Fiddle

http://angularjs.org/

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: 100%;
    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 markerBox = target.getBoundingClientRect();
        var containerBox = target.parentNode.getBoundingClientRect();
        var space = containerBox.width;
        var x = event.clientX;
        var percentage = Math.min(Math.max(containerBox.left, x), containerBox.right)/space;
    		$scope.level = percentage * 100;
    	}
    };

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