JavaScript-Problems-and-Solution/CreateASlider.html at master · evitajain15/JavaScript-Problems-and-Solution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
	<title>Mouse slide</title>
	<style>
		.slider {
		  border-radius: 5px;
		  background: #E0E0E0;
		  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
		  width: 310px;
		  height: 15px;
		  margin: 5px;
		}

		.thumb {
		  width: 10px;
		  height: 25px;
		  border-radius: 3px;
		  position: relative;
		  left: 10px;
		  top: -5px;
		  background: blue;
		  cursor: pointer;
		}
	</style>
</head>
<body>
 	<div id="slider" class="slider">
    	<div class="thumb"></div>
  	</div>
	<script>
		let thumb = slider.querySelector('.thumb');

		thumb.onmousedown = function(event) {
			event.preventDefault();

			let shiftX = event.clientX - thumb.getBoundingClientRect().left;

			document.addEventListener('mousemove', onMouseMove);
			document.addEventListener('mouseup', onMouseUp);

			function onMouseMove(event) {
				let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;

				if (newLeft < 0) {
					newLeft = 0;
				}
				let rightEdge = slider.offsetWidth - thumb.offsetWidth;
				if (newLeft > rightEdge) {
					newLeft = rightEdge;
				}

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

			function onMouseUp() {
				document.removeEventListener('mouseup', onMouseUp);
				document.removeEventListener('mousemove', onMouseMove);
			}

		};

		thumb.ondragstart = function() {
			return false;
		};
	</script>
</body>
</html>