attl8d/ceva.css

## ceva.css
.line {
  width: 500px;
  height: 10px;
  border: 2px solid red;
}

.draggable {
  height: 100%;
  background-color: grey;

}

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="ceva.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="slider">
  <div class="line">
    <div class="draggable" slider></div>
  </div>
</body>
</html>

## script.js
(function(angular) {
  'use strict';
  angular.module('slider', []).
  directive('slider', function($document) {
    return function(scope, element, attr) {
      var startX = 0,
        startY = 0,
        x = 0,
        y = 0;
      element.css({
        position: 'relative',
        backgroundColor: 'lightgrey',
        cursor: 'pointer',
        display: 'block',
        width: '100px'
      });
      element.on('mousedown', function(event) {
        // Prevent default dragging of selected content
        event.preventDefault();
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', efMousemove);
        $document.on('mouseup', mouseup);
      });

      var efMousemove = debounce(mousemove, 10);

      function debounce(func, wait, immediate) {
        var timeout;
        return function() {
          var context = this,
            args = arguments;
          var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
        };
      };

      var timer;

      function mousemove(event) {
        if (timer)
          y = 0;
        x = event.screenX - startX;
        if(x < 0) {
          x = 0;
          element.css({
          top: y + 'px',
          left: x + 'px'
        });
        return;
        }
        if ((x + 100) > 500) {
          x = 400;
          element.css({
          top: y + 'px',
          left: x + 'px'
        });
        return
        }
        element.css({
          top: y + 'px',
          left: x + 'px'
        });
        //send value;

console.log(x)
      }

      function mouseup() {
        $document.off('mousemove', efMousemove);
        $document.off('mouseup', mouseup);
      }
    };
  });
})(window.angular);
	.line {
	width: 500px;
	height: 10px;
	border: 2px solid red;
	}

	.draggable {
	height: 100%;
	background-color: grey;

	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="ceva.css">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body ng-app="slider">
	<div class="line">
	<div class="draggable" slider></div>
	</div>
	</body>
	</html>
	(function(angular) {
	'use strict';
	angular.module('slider', []).
	directive('slider', function($document) {
	return function(scope, element, attr) {
	var startX = 0,
	startY = 0,
	x = 0,
	y = 0;
	element.css({
	position: 'relative',
	backgroundColor: 'lightgrey',
	cursor: 'pointer',
	display: 'block',
	width: '100px'
	});
	element.on('mousedown', function(event) {
	// Prevent default dragging of selected content
	event.preventDefault();
	startX = event.screenX - x;
	startY = event.screenY - y;
	$document.on('mousemove', efMousemove);
	$document.on('mouseup', mouseup);
	});

	var efMousemove = debounce(mousemove, 10);

	function debounce(func, wait, immediate) {
	var timeout;
	return function() {
	var context = this,
	args = arguments;
	var later = function() {
	timeout = null;
	if (!immediate) func.apply(context, args);
	};
	var callNow = immediate && !timeout;
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	if (callNow) func.apply(context, args);
	};
	};

	var timer;

	function mousemove(event) {
	if (timer)
	y = 0;
	x = event.screenX - startX;
	if(x < 0) {
	x = 0;
	element.css({
	top: y + 'px',
	left: x + 'px'
	});
	return;
	}
	if ((x + 100) > 500) {
	x = 400;
	element.css({
	top: y + 'px',
	left: x + 'px'
	});
	return
	}
	element.css({
	top: y + 'px',
	left: x + 'px'
	});
	//send value;

	console.log(x)
	}

	function mouseup() {
	$document.off('mousemove', efMousemove);
	$document.off('mouseup', mouseup);
	}
	};
	});
	})(window.angular);