xto3na/Drag-n-drop_slider.html

## Drag-n-drop_slider.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="slider" class="slider">
    <div class="thumb"></div>
  </div>

  <script>
    var pageYOffset = 0,
        pageXOffset = 0;
    var sliderElem = document.getElementById('slider');
    var thumbElem = sliderElem.children[0];

    thumbElem.onmousedown = function(e) {
      var thumbCoords = getCoords(thumbElem);
      var shiftX = e.pageX - thumbCoords.left;
      // shiftY здесь не нужен, слайдер двигается только по горизонтали

      var sliderCoords = getCoords(sliderElem);

      document.onmousemove = function(e) {
        //  вычесть координату родителя, т.к. position: relative
        var newLeft = e.pageX - shiftX - sliderCoords.left;

        // курсор ушёл вне слайдера
        if (newLeft < 0) {
          newLeft = 0;
        }
        var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
        if (newLeft > rightEdge) {
          newLeft = rightEdge;
        }

        thumbElem.style.left = newLeft + 'px';
      }

      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
      };

      return false; // disable selection start (cursor change)
    };

    thumbElem.ondragstart = function() {
      return false;
    };

    function getCoords(elem) { // кроме IE8-
      var box = elem.getBoundingClientRect();

      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      };

    }
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	</head>

	<body>

	<div id="slider" class="slider">
	<div class="thumb"></div>
	</div>

	<script>
	var pageYOffset = 0,
	pageXOffset = 0;
	var sliderElem = document.getElementById('slider');
	var thumbElem = sliderElem.children[0];

	thumbElem.onmousedown = function(e) {
	var thumbCoords = getCoords(thumbElem);
	var shiftX = e.pageX - thumbCoords.left;
	// shiftY здесь не нужен, слайдер двигается только по горизонтали

	var sliderCoords = getCoords(sliderElem);

	document.onmousemove = function(e) {
	// вычесть координату родителя, т.к. position: relative
	var newLeft = e.pageX - shiftX - sliderCoords.left;

	// курсор ушёл вне слайдера
	if (newLeft < 0) {
	newLeft = 0;
	}
	var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
	if (newLeft > rightEdge) {
	newLeft = rightEdge;
	}

	thumbElem.style.left = newLeft + 'px';
	}

	document.onmouseup = function() {
	document.onmousemove = document.onmouseup = null;
	};

	return false; // disable selection start (cursor change)
	};

	thumbElem.ondragstart = function() {
	return false;
	};

	function getCoords(elem) { // кроме IE8-
	var box = elem.getBoundingClientRect();

	return {
	top: box.top + pageYOffset,
	left: box.left + pageXOffset
	};

	}
	</script>

	</body>

	</html>