Bonjour a tous
vu que les imput TYPE range c'est horrible dans IE je me fait mes propres sliders
mais n'arrive pas a le faire fonctionner
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 <!doctype html> <html lang="fr"> <head> <!--meta charset="utf-8"--> <title>TEST SLIDE</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> </style> <script type= "text/javascript"> var barre; var sl; var curseur; var oldX; var newX; var moinsX; function dragStart(event) { console.log("depart"); curseur = event.target; barre = document.getElementById("barre1"); event.stopPropagation(); oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft); moinsX = oldX - curseur.offsetLeft; sl=true; } function dragging(event) { newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft); console.log("deplacement " +newX); //event.stopPropagation(); curseur.style.position = "absolute"; curseur.style.left = (newX - moinsX) + "px"; } function relache(event) { //event.stopPropagation(); } function ajoute() { barre = document.getElementById("barre1"); var curseur=document.getElementById("curseur1"); curseur.addEventListener("dragstart", dragStart, false); curseur.addEventListener("ondrag", dragging, false); curseur.addEventListener("dragend", relache, false); } </script> </head> <body> <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:500px;border:2 solid red;"> un slide pas comme les autre <p id ="res"></p> <br/><br/> <div id="barre1" style="width:200px;height:4px;border:2px solid blue;"> <div id="curseur1" style="margin-top:-5px;width:8px;height:15px;background-color:red;border-radius:4px;" draggable="true"></div> </div> </div> <script>ajoute();</script> </body> </html>
Partager