Slider html, Réccupérer une value et l'afficher dans la page
Bonjour,
Je me permets de vous envoyer ce message, car je ne connais pas assez le javascript pour trouver seul la solution, et j'ai donc besoin d'un petit coup de pouce, que ce soit pour m'envoyer vers le bon tuto, la bonne page de la doc, ou plus si vous jugez que l'opération est compliqué à réaliser par un apprentit.
J'ai un slider en dhtml qui me permet de sélectionner 5 valeurs.
Le .js qui affiche le slider à été trouvé ici: http://www.dhtmlgoodies.com/index.ht..._amount_slider
Code:
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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text box slider</title>
<style type="text/css">
.form_widget_amount_slider{
border-top:1px solid #9d9c99;
border-left:1px solid #9d9c99;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
background-color:#f0ede0;
height:3px;
position:absolute;
bottom:0px;
}
</style>
<script src="dhtmlgoodies_slider.js"></script>
<script type="text/javascript">
function setentrybytype()
{
var formObj = document.forms[0];
var type = formObj.niveau.value.replace(/[^\d]/,'');
if(type=0)type=debutant;
if(type=1)type=supérieur;
if(type=2)type=avancé;
if(type=3)type=expert;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td width="0">Niveau</td>
<td id="slider_target"></td>
<td><input type="text" name="type" size="3" value="débutant" onchange="setentrybytype()"></td>
</tr>
</table>
</form>
<script type="text/javascript">
// Javascript pour le slider
form_widget_amount_slider('slider_target',document.forms[0].type,200,0,3,"setentrybytype()");
</script>
<p>voici mon slider.</p>
</body>
</html> |
Comme vous avez dû vous en rendre compte je tente d'écrire en face de mon slider, un texte en fonction de la valeur de mon imput, sachant que la valeur par défaut est "débutant".
C'est pour ça que j'ai tenté d'écrire une fonction qui viendrait remplacer le texte en temps réel sur ma page en fonction de la valeur de mon slider:
Code:
1
2
3
4
5
6
7
8
9
10
11
|
function setentrybytype()
{
var formObj = document.forms[0];
var type = formObj.niveau.value.replace(/[^\d]/,'');
if(type=0)type=debutant;
if(type=1)type=supérieur;
if(type=2)type=avancé;
if(type=3)type=expert;
} |
Le principe n'a pas l'air compliqué mais je ne sais pas par quoi commencer.
Pour info, je souhaite par la suite généré des couleurs différentes du fond de mon slider en fonction de la valeur de celui-ci afin de suivre l'exemple suivant:
exemple
En passant du vert clair au rouge. .... l'idée me plais, à voir une fois intégré si ce n'est pas trop kitch.
Merci d'avance pour vos éléments de réponses. :ccool:
