Slider avec 2 poignées [Fait]

**[ced]** · 26/05/2008, 18h19

Bonjour,

J'aimerais utiliser un slider avec 2 poignets de sélection.
Par exemple, j'ai une échelle de donnée allant de 0 à 24, j'aimerais sélectionner un créneau allant de 3 à 10. Les 2 poignets de sélection me permettent de renseigner la plage de données.

Mes recherches sur google m'ont dirigé simplement à des sliders avec 1 poignet.

Connaissez-vous une solution qui soit libre d'utilisation et qui réponde à mes attentes.

Sinon, pouvez-vous me guidez pour développez cet élément en javascript.

Merci.

**Sierra3193** · 19/11/2008, 10h05

Bonjour,

j'ai le même problème. Sur une barre de temps, je veux pouvoir sélectionner une certaine plage à traiter, un peu comme pour un logiciel de montage de film ne garder qu'une partie.
En tapant "bislider" sous Google, je tombe sur un projet français qui répond à mon besoin s'il n'interdisait pas l'usage commercial de l'archive.

Existe-t-il un autre projet libre ? Sinon, existe-t-il un tutoriel pour coder son composant graphique ? (je suppose qu'à partir de la classe JSlider, on doit pouvoir facilement passer à deux curseurs)

Merci

**bigboomshakala** · 19/11/2008, 10h09

c'est le forum javascript ici, pas java...

**le_chomeur** · 19/11/2008, 10h11

tout dépend de vos besoins ...

mais si ça peut vous aider :

Code :

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo Slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var Drag = {
 
	MyObj : null,
	InfoBulle : null,
	init : function(o,MyObjToLimit)
	{
 
		Drag.MyObj = o ;
		//Sauvegarde de la classe d'origine de l'objet
		Drag.MyObj.MyClassName = o.className;
		//On vérifit si l'objet est limité a un autre objet
		Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
		//On assigne la méthode au click de la souris sur l'MyObjet
		Drag.MyObj.onmousedown	= Drag.start;
		Drag.MyObj.onmousedown	= Drag.start;
 
		//Si l'élément n'as pas de propriété left et top on lui en assigne par défault
		if (isNaN(parseInt(Drag.MyObj.style.left  ))) Drag.MyObj.style.left   = "0px";
		if (isNaN(parseInt(Drag.MyObj.style.top   ))) Drag.MyObj.style.top    = "0px";
 
		//Si l'on doit limiter le déplacement a une zone on calcul les points
		if(Drag.MyObj.MyObjToLimit){
				Drag.MyObj.minLeft = Drag.findPos(Drag.MyObj.MyObjToLimit)[0] ;
				Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
				Drag.MyObj.minTop = Drag.findPos(Drag.MyObj.MyObjToLimit)[1] ;
				Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
		}
 
		//Et on place l'élément dans l'objet
		Drag.MyObj.style.left = Drag.MyObj.minLeft;
		Drag.MyObj.style.top = Drag.MyObj.minTop;
 
	},
 
	start : function(e)
	{
		Drag.MyObj = this;
		//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
		e = Drag.GetEvent(e);
		//On affecte la classe InDrag
		Drag.MyObj.className = "inDrag";
		//On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
		Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
		Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
		//On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
		document.onmousemove	= Drag.drag;
		Drag.MyObj.onmouseup		= Drag.end;
		document.onmouseup		= Drag.end;
 
		return false;
	},
 
	drag : function(e)
	{
		//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
		e = Drag.GetEvent(e);
		//Récupération de la position de la souris
		var curX = e.clientX;
		var curY = e.clientY;
 
		var newPosX = curX - Drag.MyObj.ecartX;
		var newPosY = curY - Drag.MyObj.ecartY;
 
		//Si l'élément les limités a  un conteneur
		if(Drag.MyObj.MyObjToLimit != null){
			//Déplacement de l'objet
			if(newPosX < (Drag.MyObj.minLeft+5)){
				Drag.MyObj.style.left = Drag.MyObj.minLeft+5 + "px";
			}
			else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight-5)){
				Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth - 5 + "px";
			}
			else{
				Drag.MyObj.style.left = newPosX + 'px';
			}
 
 
			if(newPosY < (Drag.MyObj.minTop+5)){
				Drag.MyObj.style.top = Drag.MyObj.minTop + 5 + 'px';
			}
			else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom-5)){
				Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight - 5 +"px";
			}
			else{
				Drag.MyObj.style.top = newPosY + 'px';
			}
		}
		//Sinon déplacement normalement
		else{
			Drag.MyObj.style.top = newPosY + 'px';
			Drag.MyObj.style.left = newPosX + 'px';
		}
		document.getElementById('debug').innerHTML = ((parseInt(Drag.MyObj.style.top ) - parseInt(Drag.MyObj.offsetHeight) +5)-Drag.MyObj.minTop + "/"+180) +"*"+ 100;
		document.getElementById('debug').innerHTML += "<br />" + parseInt(((parseInt(Drag.MyObj.style.top ) - parseInt(Drag.MyObj.offsetHeight) +5 - Drag.MyObj.minTop) /180) * 100);
		return false;
	},
 
	end : function()
	{
		//On remet la classe de l'objet
		Drag.MyObj.className = Drag.MyObj.MyClassName;
		//On supprime les évènements liés au déplacement :)
		document.onmousemove = null;
		document.onmouseup   = null;
		//On détruit l'MyObjet
		Drag.MyObj = null;
	},
 
	GetEvent : function(e)
	{
		if (!e) e = window.event;
		return e;
	},
	findPos : function(obj){
		//position x / y de l'objet
	    var x = obj.offsetLeft || 0;
	    var y = obj.offsetTop || 0;
		//tant qu'il y a un parent, on ajoute la position de son parent
	    while (obj = obj.offsetParent) {
	        x += obj.offsetLeft
	        y += obj.offsetTop
	    }
		//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
	    return new Array(x,y);
	}
};
 
</script>
</head>
<body>
<div style="width:200px;height:50px;border:1px;padding:10px;background-color:red;" id="debug">
</div>
<br />
<div style="height:200px;width:20px;border:1px;background-color:red;" id="dragMe2">
	<div style="width:10px;height:10px;line-height:5px;font-size:5px;border:1px;background-color:yellow;position:absolute;" id="dragMe">
	</div>
	<div style="width:10px;height:10px;line-height:5px;font-size:5px;border:1px;background-color:green;position:absolute;bottom:0px" id="dragMe3">
	</div>
</div>
 
 
<div style="height:20px;width:200px;border:1px;background-color:red;" id="dragMe4">
	<div style="width:10px;height:10px;line-height:5px;font-size:5px;border:1px;background-color:yellow;position:absolute;" id="dragMe5">
	</div>
	<div style="width:10px;height:10px;line-height:5px;font-size:5px;border:1px;background-color:green;position:absolute;bottom:0px" id="dragMe6">
	</div>
</div>
 
</body>
 
<script type="text/javascript">
d = document.getElementById('dragMe');
d2 = document.getElementById('dragMe2');
d3 = document.getElementById('dragMe3');
d4 = document.getElementById('dragMe4');
d5 = document.getElementById('dragMe5');
d6 = document.getElementById('dragMe6');
Drag.init(d,d2);
Drag.init(d3,d2);
Drag.init(d5,d4);
Drag.init(d6,d4);
</script>
</html>

possibilité d'adapter à vos besoins ^^