Concevoir des sliders perso

**patricktoulon** · 27/02/2018, 15h40

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>

**Beginner.** · 27/02/2018, 15h59

Salut,

C'est quoi au juste un sliders ? Est-ce une sorte de "splitter"/"split pane" comme ici : http://andrienko.github.io/splitter ?

EDIT : Ah non ça y est je vois ce que c'est en testant ton code...

EDIT2 : Je sais pourquoi ça marche pas c'est parce qu'il n'est pas comme les autres comme tu l'écris... Non blague à part je regarde...

**Beginner.** · 27/02/2018, 16h27

J'ai regardé et je vois que tu mélanges une gestion perso avec les événements du glisser/déposer natif mais celui-ci a des règles qui dépendent du navigateurs, c'est faisable mais bon à ta place je le ferais sans le glisser/déposer natif comme tu l'as déjà fait pour les images...

En plus dans ton cas tu veux que les déplacements se fassent selon une seule dimension (horizontalement) et justement je ne suis pas sûr qu'on puisse imposer cela avec le glisser/déposer natif...

J'avais ouvert un fil là-dessus mais je ne le retrouve pas...

**patricktoulon** · 27/02/2018, 17h42

re
bonjour beguinner
regarde dans ce model j'utilise les evenement drag builtdin pour faire mon drag perso (exclusivement IE) et ca fonctionne tres bien

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
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
 
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=11">
 
<style> 
html{
width:100%;
height:100%;
}
#editeur{
position:absolute;
width:900px;
height:600px;
border:2px solid red;
overflow:auto;
}
 
#drago{
width:100px;
height:100px;
border:2px solid blue;
}
</style>
 
<script type="text/javascript">
        var drago;
        var oldX;
        var oldY;
        var DX;
        var DY;
        var oldborder;
        var editeur;
        var oldparent;
        var newX;
        var newY;
        // event.stopPropagation();
        //event.returnValue = false;
        //var rect = drago.getBoundingClientRect();
        // event.preventDefault();
        function dragStart(event) {
                drago = event.target;
                event.stopPropagation();
                editeur = document.getElementById("editeur");
                oldparent = drago.parentElement;
                oldborder = drago.style.border;
                drago.style.border = "4px dotted gray";
                oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                oldY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                moinsX = oldX - drago.offsetLeft;
                moinsY = oldY - drago.offsetTop;
                DX = oldX - moinsX;
                DY = oldY - moinsY;
        }
        function dragging(event) {
                event.stopPropagation();
                newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                newY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                drago.style.position = "absolute";
                drago.style.left = (newX - moinsX) + "px";
                drago.style.top = (newY - moinsY) + "px";
        }
        function relache(event) {
                event.stopPropagation();
                var rect = drago.getBoundingClientRect();
                var divs = editeur.getElementsByTagName("div");
                var newparent = document.getElementById("editeur");
                for (var i = 0; i < divs.length; i++) {
                        var rect2 = divs[i].getBoundingClientRect();
                        if (rect2.left < rect.left && rect2.top < rect.top && rect2.bottom > rect.bottom && rect2.right > rect.right) {
                                newparent = divs[i];
                                var RL = rect2.left;
                                var RT = rect2.top
                        }
                }
                if (newparent.id != oldparent.id) {
                        newparent.appendChild(drago);
                        drago.style.left = rect.left - RL + "px";
                        drago.style.top = rect.top - RT + "px";
                        if (newparent.id === "editeur") {
                                drago.style.left = rect.left -editeur.offsetLeft+ "px";
                                drago.style.top = rect.top +-editeur.offsetTop +"px";
                        }
                }
                drago.style.border = oldborder;
        }
</script>
</head>
<body>
<div id="editeur" contenteditable="true"  > 
<p>test drag : <font id=res></font></p>
<div  id="div41" style="border: 2px solid blue; left: 43px; top: 26.6px; width: 104px; height: 54px; position: absolute; z-index: 30;"  ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)"  ondrop="return false" >div41</div>
<div  id="div40" style="border: 5px solid green; left: 115.2px; top: 101.79px; width: 186px; height: 138px; position: absolute; z-index: 30;" ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)" ondrop="return false" >div40</div>
<div  id="div42" style="border: 3px solid cyan; left: 332.6px; top: 72.39px; width: 267px; height: 230px; position: absolute; z-index: 30;" ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)" ondrop="return false" >div42</div>
</div>
</body>
</html>

**Beginner.** · 27/02/2018, 18h10

Oui mais comme je disais il me semble que le glisser/déposer natif a des règles qui dépendent du navigateur (je ne dis pas que c'est insurmontable bien sûr). Ca marche sur IE ok mais qu'en est-il des autres navigateurs ? C'est à voir...

Mais surtout il y a une différence comme je disais : "En plus dans ton cas tu veux que les déplacements se fassent selon une seule dimension (horizontalement) et justement je ne suis pas sûr qu'on puisse imposer cela avec le glisser/déposer natif..."...

J'ai retrouvé le fil que j'avais ouvert : Drag&Drop - Imposer une trajectoire ?

PS : Regardons aussi le code de psychadelic...

**NoSmoking** · 27/02/2018, 19h26

Bonjour,
issu de ton premier code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

curseur.addEventListener("ondrag", dragging, false);

il faut mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

curseur.addEventListener("drag", dragging, false); // sans le on

Pourquoi utiliser le drag&drop qui n'est pas au départ fait pour cela et ne pas gérer les événements au mousedown sur le curseur ?
C'est également dommage de se priver, sauf à le gérer, du déplacement au clavier.

**Beginner.** · 27/02/2018, 19h35

Je pense aussi que ce serait mieux de tout gérer soi-même avec les événements classiques comme onmoussedown; onmoussemove et onmousseup... On peut imposer un déplacement horizotal alors que je ne sais pas si c'est possible avec le glisser/déposer natif (html5)...

**patricktoulon** · 27/02/2018, 22h29

re
bonsoir
@Nosmoking
a ben je pouvais toujours chercher (ondrag/drag)

c'est ok pour le deplacement

pour les evenements mousedown up move
je suis obligé de passer par le document.body evenement et cela je ne peux pas il est deja utilisé
si je passe par les div ,ca ne fonctionne pas comme sil attendait le mouse up pour pouvoir executer le code dans move
un petit exemple serait le bien venu j'ai peut etre raté quelque chose

**patricktoulon** · 27/02/2018, 23h18

bon ben je ne sais pas l'erreur que j'ai faite plus tot dans la journée mais le mouse(down,move,up) fonctionne

voila le model

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
56
57
58
59
60
61
62
63
64
65
<!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 = curseur.parentElement;
 event.stopPropagation();
 oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 moinsX = oldX - curseur.offsetLeft;
 sl = true;
}
function dragging(event) {
 if (sl === true) {
  newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  console.log("deplacement " + newX);
  //event.stopPropagation();
  var posX = newX - moinsX;
  if (posX < 0) {
   posX = 0;
  }
  if (posX > barre.offsetWidth - 8) {
   posX = barre.offsetWidth - 8;
  }
  curseur.style.position = "absolute";
  curseur.style.left = posX + "px";
  document.getElementById("res").innerHTML = curseur.offsetLeft ;
 }
}
function relache(event) {
 sl = false;
}
function ajoute() {
 barre = document.getElementById("barre1");
 var curseur = document.getElementById("curseur1");
 curseur.addEventListener("mousedown", dragStart, false);
 curseur.addEventListener("mousemove", dragging, false);
 curseur.addEventListener("mouseup", 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:104px;height:4px;border:2px solid blue;">
<div id="curseur1" style="margin-top:-5px;width:8px;height:15px;background-color:red;border-radius:4px;" ></div>
</div>
</div>
<script>ajoute();</script>
</body>
</html>

par contre il faut pas faire la moindre erreur avec la souris des que tu sort du champ(difficile de deplacer la souris vraiment horizontalement) je le perd et des que je reviens dessus sans!! mousedown il glisse

tandis qu'avec les evenements (dragstart,drag) il es plus permisif avec le souris
model dragging

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
56
57
58
<!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();
 var posX=newX - moinsX;
         if( posX<0){posX=0;}        
         if(posX  > barre.offsetWidth-8){posX=barre.offsetWidth-8;}    
        curseur.style.position = "absolute";
 curseur.style.left = posX + "px";
}
function relache(event) {
 //event.stopPropagation();
}
function ajoute() {
 barre = document.getElementById("barre1");
 var curseur=document.getElementById("curseur1");
        curseur.addEventListener("dragstart", dragStart, false);
 curseur.addEventListener("drag", 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>

le model mouse est compatible firefox et chrome :j'ai testé!!, je garderais donc celui la mais il faut que je lui donne un peu plus de flexibité avec la souris
je pense avoir trouver un moyen mais trop fatigué je vais encore tout planter

**Beginner.** · 27/02/2018, 23h24

J'avais fait ce test entre temps : http://jsbin.com/ceceqigise/edit?js,output (ça marche sur Chrome mais j'ai vu seulement après que FF rajoute 2 à curseur.offsetLeft car le repère n'est pas le même (chrome --> paddingBox et FF --> borderBox), encore une différence agaçante, ça m’agace le CSS mais bon il suffit d'utiliser left à la place...).

Mais effectivement j'ai dû passer par document (ou bien document.body) et justement je me suis demandé si c'était un problème et j'ai cherché un autre moyen (je crois que c'est possible c'est à voir) mais bon par rapport au problème que tu soulèves je crois qu'on peut associer plusieurs fonctions au document.body.onXXX mais il faut je crois utiliser addEventListener et non document.body.onXXX = uneFonction, c'est à voir...

**Beginner.** · 27/02/2018, 23h42

Envoyé par patricktoulon

par contre il faut pas faire la moindre erreur avec la souris des que tu sort du champ(difficile de deplacer la souris vraiment horizontalement) je le perd et des que je reviens dessus sans!! mousedown il glisse

Ah oui il y a quelques temps je m'étais fais avoir aussi par ce problème alors tu peux améliorer les choses en mettant le mousemove et le mouseup non pas sur le curseur mais sur la barre et bien sûr le moussedown reste quant à lui sur le curseur.

Mais même comme ça il y aura encore des difficultés c'est pourquoi comme je disais : "j'ai dû passer par document (ou bien document.body) et justement je me suis demandé si c'était un problème et j'ai cherché un autre moyen (je crois que c'est possible c'est à voir) mais bon par rapport au problème que tu soulèves je crois qu'on peut associer plusieurs fonctions au document.body.onXXX mais il faut je crois utiliser addEventListener et non document.body.onXXX = uneFonction, c'est à voir..."

**patricktoulon** · 27/02/2018, 23h53

re
oui pour le body c'est addeventlistener mon model1 avec evenement mouse est plus permissif mais je me sens pas encore de devoir modifier cela dans mon wysiwyg
j'ai trop avancé pour tout changer

je pense que je vais mettre mes gisseur dans un div un peux plus epais et utiliser me move de celui ci comme ca j'aurais plus de flexibilité avec la souris

tu a testé les deux modeles ???

**Beginner.** · 28/02/2018, 00h11

Oui j'ai testé : le premier model fonctionne mais il a le problème que tu as évoqué et auquel je t'ai répondu , le problème c'est qu'il faut garder le curseur souris bien au dessus du curseur (splitter) ce qui est difficile car souvent la souris va plus vite et alors tu n'es plus au-dessus du curseur (splitter) et alors cela ne fonctionne plus...

Relis mes réponses à ce sujet et teste le code que j'ai posté tu verras la différence...

Et pour le deuxième avec le glisser`déposer il ne fonctionne pas sur tous les navigateurs, comme je te disais il y a des conditions à respecter comme autoriser le lâcher et d'autres...

**patricktoulon** · 28/02/2018, 00h17

et oui j'ai bien lu tes reponses et to model dans le lien a un des problemes que j'evoquais a savoir le stop drag n'est pas effectif quand tu va trop vite
dans la capture ci dessous tu le vois bouger mais je ne suis pas appuyé sur le boutons de la souris

Nom : demo2.gif
Affichages : 165
Taille : 254,7 Ko

Nom : demo2.gif
Affichages : 165
Taille : 254,7 Ko

**Beginner.** · 28/02/2018, 11h02

Ah oui mais ça c'est un autre problème à régler, je l'avais remarqué, ce bug arrive moins souvent du coup le code marche quand même mieux même avec ce bug...

Mon idée c'est que parfois le navigateur croit que tu veux faire un glisser/déposer (on a d'ailleurs une image qui apparaît sous le curseur souris) et à ce moment-là le onmousseup n'est pas exécuté...

--> Une idée de solution : rajouter event.preventDefault();. Cela empêchera peut-être le glisser/déposer ...

Sinon il y a peut-être une meilleur possibilité d'interdire le glisser/déposer...

- Peux-tu tester ce code : http://jsbin.com/xedocumete/edit?js,output et me dire si le problème persiste ou non ?

**Beginner.** · 28/02/2018, 11h19

Envoyé par Beginner.

Sinon il y a peut-être une meilleur possibilité d'interdire le glisser/déposer...

Peut-être que c'est mieux avec draggable="false"...

Et aussi je pense que c'est mieux d'annuler plutôt le ondragstart et peut-être aussi le ondrop...

Je vais ouvrir un fil pour demander...

**Beginner.** · 28/02/2018, 11h40

Envoyé par Beginner.

- Peux-tu tester ce code : http://jsbin.com/xedocumete/edit?js,output et me dire si le problème persiste ou non ?

Peux-tu aussi tester celui-là : http://jsbin.com/mabelihahu/edit?js,output ?

**patricktoulon** · 28/02/2018, 12h05

re
bonjour beguiner
oui avec IE il persiste avec fire fox non j'ai tester les deux

ce matin j'ai tenté une autre approche pour me debarasser du probleme d'evenement
j'ai carement suprimé le rail bleu et je l'ai remplacer par un gradient dans le conteneur
si bien que je n'ai plus que mon curseur dans un div
le start et effectué par le down curseur ,le reste par le move,up du conteneur
le conteneur ayant 25 px de hauteur il est beaucoup plus permissif c'est normal

par contre j'ai ajout2 sur ce conteneur l'evement mouseout au cas ou il me prendraiT une crise du syndrome de la tourette

et la ca va plus meme si je suis toujours a l'interieur ALORS qu'il n'y a rien d'autre a part le curseur
débloque la ligne 58 et essaie
c'est absolument ilogique

nouveau slide version 3

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!doctype html>
<html lang="fr">
<head>
 <!--meta charset="utf-8"-->
  <title>TEST SLIDE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<style>
#fond {
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(255, 255, 255, 0) 63%);
}
.cur {
 background: linear-gradient(to bottom, rgba(180, 227, 145, 1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
</style>
</style>
<script  type= "text/javascript">
var largeur;
var sl;
var curseur;
var oldX;
var newX;
var moinsX;
function dragStart(event) {
 console.log("depart");
 curseur = event.target;
 largeur = curseur.parentElement.offsetWidth - 4;
 event.stopPropagation();
 oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 moinsX = oldX - curseur.offsetLeft;
 sl = true;
}
function dragging(event) {
 if (sl === true) {
  newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  console.log("deplacement " + newX);
  var posX = newX - moinsX;
  if (posX < 0) {
   posX = 0;
  }
  if (posX > largeur - 4) {
   posX = largeur - 4;
  }
  curseur.style.position = "absolute";
  curseur.style.left = posX + "px";
  document.getElementById("res").innerHTML = curseur.offsetLeft;
 }
}
function relache(event) {
 event.preventDefault();
 sl = false;
}
function ajoute() {
 var dragg = document.getElementById("fond");
 var curseur = document.getElementById("curseur1");
 curseur.addEventListener("mousedown", dragStart, false);
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 //dragg.addEventListener("mouseout", 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="fond" style="position:relative;width:106px;height:25px;border:1px solid green;overflow:none;">
         <div id="curseur1" class="cur" style="margin-top:5px;width:8px;height:15px;border-radius:4px;" ></div>
      </div>
   </div>
   <script>ajoute();</script>
</body>
 
</html>

**Beginner.** · 28/02/2018, 12h31

Envoyé par patricktoulon

oui avec IE il persiste avec fire fox non j'ai tester les deux

Chez moi c'est encore pire finalement, j'arrive encore mieux à le faire bugger...

Mais j'ai une autre idée...
PS : J'ai ouvert ce fil : Interdire le glisser/déposer d'un élément ?

Envoyé par patricktoulon

le conteneur ayant 25 px de hauteur il est beaucoup plus permissif c'est normal

Oui ça rejoint l'idée dont je parlais : "...tu peux améliorer les choses en mettant le mousemove et le mouseup non pas sur le curseur mais sur la barre...".

Oui car la barre est plus grande après si tu veux utiliser un conteneur plus grand comme tu l'as fait la question sera est-ce que le slider ne prendra pas trop de place ? C'est un dilemme...

Je pense qu'utiliser le document ou le document.body est le plus grand et permet d'autres choses auxquelles tu n'as peut-être pas encore pensées...

Sinon je vais tester ton dernier code...

**patricktoulon** · 28/02/2018, 13h14

oui l'evenement document.mouse.... et beaucoup plus permissif c'est sur
mais je ne peux pas l'utiliser car il l'est deja pour le meme genre de chose en plus il m'est donc tres ennuyeux de devoir tout refaire

le dernier code fonctionne si on met pas le mouseout si on le met il a des boquages en restant a l'interieur du conteneur ce qui est ilogique comme comportement
peut etre un prevent defaut ou stoppropagation quelque part je sais pas

25px ca me suffirais comme emplacement c'est correcte je dois en mettre 4 dans un menu
dans cet exemple "barre" est devenue une variable numerique ce n'est plus un element ca simplifie la tache aussi

Concevoir des sliders perso

JavaScript

Discussions similaires

Partager

Partager