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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>TEST SLIDE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.Conteneur > div {
position:relative;
width:108px;
height:25px;
border:1px solid aliceblue;
}
.Conteneur > div:before {
position:absolute;
top:10px;
left:0;
display: block;
width:100%;
height:5px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(255, 255, 255, 0) 100%);
content:'';
}
.Conteneur > div > span {
position : absolute;
top:5px;
left:2px;
display: block;
width:8px;
height:15px;
border-radius:4px;
background: linear-gradient(to bottom, rgba(180, 227, 145, 1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
.Conteneur > div > span.Actif {
background: linear-gradient(to bottom, rgb(181, 145, 227) 0%, rgb(196, 25, 173) 50%, rgb(227, 145, 220) 100%);
}
</style>
</head>
<body>
<div class="Conteneur">
<h4>premier Slider</h4>
<p>0</p>
<div><span></span></div>
</div>
<div class="Conteneur">
<h4>second Slider</h4>
<p>0</p>
<div><span></span></div>
</div>
<div class="Conteneur">
<h4>troisieme Slider</h4>
<p>0</p>
<div><span></span></div>
</div>
<script>
var
ref_Conteneurs = document.getElementsByClassName('Conteneur'),
SlidersInitValue = 50,
SlidersActivClass = 'Actif'
;
for (let i = 0; i < ref_Conteneurs.length; i++) {
ref_Conteneurs[i].getElementsByTagName('p')[0].innerHTML = SlidersInitValue.toString();
ref_Conteneurs[i].getElementsByTagName('span')[0].style.left = SlidersInitValue +'px';
ref_Conteneurs[i].getElementsByTagName('span')[0].addEventListener("mousedown", CurseurActif);
}
function CurseurActif(e) {
this.classList.add(SlidersActivClass);
this.parentNode.addEventListener("mousemove", MsMvCursor,false);
this.parentNode.addEventListener("mouseout", StopTrackinkMsOut);
this.parentNode.addEventListener("mouseup", StopTrackinkMsUp);
}
function MsMvCursor(e) {
var
posLeft = e.pageX - this.offsetLeft,
SzDiv = this.getBoundingClientRect();
SzCur = this.getElementsByTagName('span')[0].getBoundingClientRect();
posLeft -= (SzCur.width / 2);
posLeft = Math.max(posLeft,0);
posLeft = Math.min(posLeft,( SzDiv.width - SzCur.width -2));
this.parentNode.getElementsByTagName('p')[0].innerHTML = posLeft;
this.getElementsByTagName('span')[0].style.left = posLeft +'px';
}
function StopTrackinkMsOut(e) {
var
posLeft = e.pageX - this.offsetLeft,
posTop = e.pageY - this.offsetTop,
SzDiv = this.getBoundingClientRect();
if ( posLeft < 1 || posTop < 1 || posLeft >= SzDiv.width || posTop >= SzDiv.height ) {
this.removeEventListener("mousemove", MsMvCursor);
this.removeEventListener("mouseout", StopTrackinkMsOut);
this.removeEventListener("mouseup", StopTrackinkMsUp);
this.getElementsByTagName('span')[0].classList.remove(SlidersActivClass);
}
}
function StopTrackinkMsUp(e) {
this.removeEventListener("mousemove", MsMvCursor);
this.removeEventListener("mouseout", StopTrackinkMsOut);
this.removeEventListener("mouseup", StopTrackinkMsUp);
this.getElementsByTagName('span')[0].classList.remove(SlidersActivClass);
}
</script>
</body>
</html> |
