Seuil Input Range

**mimoune1303** · 01/06/2012, 12h28

Salut à tous,
Je suis entrain de faire une page en HTML contenant un slider (Input Range). J'ai exécuté mon code avec Google Chrome et je n'ai pas eu de problème concernant l'affichage du slider.
J'ai mis dans cette page, du code Javascript pour gérer un seuil minimum dynamique.
Je m'explique : J'aimerais éviter que l'utilisateur puisse placer le curseur du slider en dessous d'une valeur seuil.
Pour vérifier que l'utilisateur ne soit pas en dessous de cette valeur, j'ai écris une fonction javascript qui teste la valeur de l'input range.
Si la valeur de l'input range est en dessous du seuil, je voudrais que la curseur se place à la valeur seuil.
Si la valeur du curseur est au dessus de la valeur seuil, le curseur reste à sa position.

Problème : La fonction en javascript me semble correctement implémentée mais le curseur se place de façon complètement aléatoire et je ne comprends pas ce qui se passe.

Pourriez-vous m'aider ?

Ci-dessous, le code HTML / Javascript :

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Input Range</title>
    </head>
 
    <body>
		<input type = "range" id="InputRange" min="0" value="150" max="255" step="1" onchange="showValue(this.value)" onmouseup="Threshold(this.value)"/>
		<span id="InputRange-Value">0</span>
 
		<script type = "text/javascript">
 
		function showValue(newValue)
		{
			document.getElementById("InputRange-Value").innerHTML=newValue;
		}
		function Threshold(_value)
		{
			var MinThreshold = 150;
			var InputRangeValue = _value;
			if(InputRangeValue <= MinThreshold)
			{
				alert("1");
				document.getElementById("InputRange").setAttribute("value",MinThreshold);
				alert("2");
			}
			else
			{
				document.getElementById("InputRange").setAttribute("value",InputRangeValue);
			}
		}
		</script> 
    </body>
</html>

**Muchos** · 01/06/2012, 15h22

La valeur min de l'input sert justement à ça : fixer un minimum.

Envoyé par mimoune1303

Je m'explique : J'aimerais éviter que l'utilisateur puisse placer le curseur du slider en dessous d'une valeur seuil.

Au cas où vous vous dites, par exemple : « J'ai un slider avec min="1" et max="10". Or, l'utilisateur peut placer le curseur tout en bas du slider, c'est-à-dire à 0 ». Le bas du slider n'est pas 0 mais 1.

**mimoune1303** · 01/06/2012, 16h02

Bien sur, je peux modifier l'attribut "min" de l'input range mais j'aimerais garder le range intact et pouvoir jouer directement sur la valeur du curseur.

**Bovino** · 01/06/2012, 16h20

Tu commets une erreur assez classique de confusion entre l'attribut HTML value et la propriété JavaScript correspondante value.
Fais

Code javascript :

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

document.getElementById("InputRange").value = MinThreshold;

et ça fonctionnera correctement.

Ensuite, n'oublie pas d'appeler showValue() pour rectifier l'affichage de la valeur en cas de dépassement.

**mimoune1303** · 04/06/2012, 10h38

Salut Bovino,

Je te remercie, ça marche impec =). Ce que je comprends pas, c'est que l'attribut Input est propre à l'élément HTML donc pourquoi ne pas utiliser la méthode setAttribute pour régler la valeur de l'input range ?

J'ai un dernier problème à régler et ma page sera fonctionnel.
Au lieu de régler le seuil minimum en dure, j'aimerais récupérer cette valeur d'un fichier XML et setter la valeur de la slidebar en conséquence.

Pour cela, j'ai utilisé l'objet XMLHttpRequest. Cependant, lorsque je reçois la réponse de la requête : xmlhttp.open("GET","FS.xml",false); , ma réponse est NULL : alert(xmlDoc);
FS.XML étant le fichier que je veux atteindre.
Néanmoins j'ai vérifié que :

L'objet était bien instiancié
L'intégrité du fichier FS.XML

Je ne comprends pas pourquoi la réponse est NULL.
Ci-dessous, le code de ma page :

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Input Range</title>
    </head>
 
    <body>
		<input type = "range" id="InputRange" min="0" max="255" step="1" onchange="showValue(this.value)" onmouseup="Threshold(this.value);showValue(this.value)"/>
		<span id="InputRange-Value">0</span>
 
		<script type = "text/javascript">
 
		function showValue(newValue)
		{
			document.getElementById("InputRange-Value").innerHTML=newValue;
		}
 
		function GetTagInfo(TagName)
		{
			if (window.XMLHttpRequest)
			{// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			}
			else
			{// code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
 
			xmlhttp.open("GET","Factory.xml",false);
			var xmlDoc=xmlhttp.responseXML;
			alert(xmlDoc);
			xmlhttp.send();
			var LocValue = xmlDoc.getElementsByTagName(TagName);
 
			return LocValue[0].childNodes[0].nodeValue;
		}
 
		function Threshold(_value)
		{
			var MinThreshold = GetTagInfo("WakeUpMinVolume");
			var InputRangeValue = _value;
			if(InputRangeValue <= MinThreshold)
			{
				document.getElementById("InputRange").value = MinThreshold;
			}
			else
			{
				document.getElementById("InputRange").value = InputRangeValue;
			}
		}
 
		</script> 
    </body>
</html>

Le fichier XML que j'utilise est le suivant :
http://www.mirorii.com/fichier/4/590...ctory-XML.html

Code :

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

1
2
3
4
5
6
7
 
<FactorySettings xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<FactoryParams>
<WakeUpMinVolume>205</WakeUpMinVolume>
<WakeUpMinLight>5</WakeUpMinLight>
</FactoryParams>
</FactorySettings>

**Bovino** · 04/06/2012, 10h59

Ce que je comprends pas, c'est que l'attribut Input est propre à l'élément HTML donc pourquoi ne pas utiliser la méthode setAttribute pour régler la valeur de l'input range ?

Comme déjà dit, il ne faut pas confondre l'attribut HTML value et la propriété JavaScript value.
J'avais fait une petite page de test pour pouvoir comprendre la différence : http://dmouronval.developpez.com/tes...Attributs.html

**Bovino** · 04/06/2012, 11h01

Code :

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

1
2
3
var xmlDoc=xmlhttp.responseXML;
alert(xmlDoc);
xmlhttp.send();

Tu essayes de récupérer le résultat avant d'envoyer la requête, du coup, c'est sûr, ça marche moins bien...

**mimoune1303** · 04/06/2012, 11h41

Ah Oui, c'est vrai que ça marche un peu mieux

.
Vu qu'au début j'étais en mode synchrone, j'avais pas modifié mon code.
En inter-changeant les deux lignes, j'ai un code qui fonctionne partiellement.
Je m'explique, lorsque la valeur du curseur est au dessus de 100, le curseur se remet en place à la valeur seuil, qui est en l’occurrence à 205. Mais lorsque la valeur du curseur est en dessous de 100, le curseur ne se remet pas en place.
Pour tester, j'ai changé la valeur seuil à 50 et j'observe que lorsque la valeur du curseur est supérieur à 10, ça fonctionne mais dès que la valeur est inférieur à 10, ça ne fonctionne plus...
A croire que le nombre de chiffre influe ...

Seuil Input Range

JavaScript

Discussions similaires

Partager

Partager