Faire un slider simple

Version imprimable

Bonjour,

Donc voila j'aurai aimer savoir faire un slider sur mon site pour faire un formulaire. L'ennuie étant que je ne connais pas trop le javascript. Alors après pas mal de recherche, j'ai vu qu'il existait donc un librairie qui permettait ce genre de chose "jQuery". Et donc j'ai essaye pour la barre j'ai réussie mais je n'arrive pas trop a trouver comment reguler sa taille, ainsi qu'afficher le nombre choisir avec le curseur.

Voici mon code
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 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> </head> <body> <form id="form"> <div><b>Nombre de slot</b></div><br/> <div id="bornes_prix"> <span id="slot"></span> slot</div> <div id="slider" style="width=100px; "></div> </form> <script> jQuery(document).ready(function($){ // Création d'un slider dans l'élément id slider_prix $("#slider").slider(); // Action à effectuer lorsqu'on déplace l'un des curseur slide: function(event, ui){ $('#slot').html(ui.values[0]); } // Initialisation des valeurs numériques au chargement de la page $('#slot').html($("#slider").slider("values", 0)); }); </script> </body> </html>
Et donc quand j'essaye de rajouter les valeur numérique la barre disparait de la page, mais je ne comprend pas trop pourquoi. Si quelqu'un pouvait m'aider sa serait simpas. Merci a ceux qui auront pris le temps de lire ce message.

24/01/2012, 08h46
SpaceFrog

http://javascript.developpez.com/faq...derAutomatique
24/01/2012, 16h14
minipopov

plugin de slider automatique

Bonjour, merci d'avoir répondu mais je ne crois pas que se soit ce que je recherche. Si je dis pas de bêtise c'est juste pour faire défiler un contenu (texte image). Or ce que j'aurais voulu faire, c'est une grande barre horizontale avec un curseur dessus. Et je voudrais que l'utilise puisse cliquer donc sur ce curseur et quand il le déplace vers la droite, sa ajoute 1 a une variable et inversement quand il le déplace vers la gauche sa enlève 1 a une variable avec un affichage en direct de la valeur de la variable.

Par exemple, moi dans mon formulaire, je voudrais que l'utilisateur voit le nombre de place qu'il prend pour un serveur vocale. Donc faut pouvoir aussi reprendre la variable je suppose ou lui affecte une id non?

ha un peu le principe du spinner ...

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
<script type='text/javascript'>
$(function(){
$('#container').scroll( function(){
	$('#res').val($('#container').scrollLeft() )
})
 
})
</script>
<style type="text/css">
#container {width:100px;
overflow-x:auto;
overflow-y:hidden;
}
.drag {width:1100px;}
</style>
</head>
<body>
<div id="container">
	<div class="drag">&nbsp;
	</div>
</div>
<input type="text" id="res" value="" />
 
</body>
</html>

24/01/2012, 21h40
minipopov

re

Donc oui sa ressemblerait un peu a sa. Sauf qu'avec ce code je peux pas récupéré la valeur de la barre?
24/01/2012, 21h49
minipopov

re

Par exemple donc quand on va sur, http://docs.jquery.com/UI/Slider. On a la documentation du slider. mais j'arrive pas trop a tout comprendre donc du coups j'arrive juste a faire une barre simple. Sans valeur max, sans rien.
25/01/2012, 08h22
SpaceFrog

Citation:

Sauf qu'avec ce code je peux pas récupéré la valeur de la barre?

Ben non c'est d'ailleurs pour ça que je n'arrive pas à la mettre en value du textbox :mrgreen::mrgreen::mrgreen:

Soution

Bonjour, donc en cherchant un peu j'ai trouve donc un code permettant de faire ce que je voulais. Donc après je sais pas exactement comment sa marche mais bon... Au moin je post la solution

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
 
<meta charset="utf-8">
 
 
 
 
 
 
 
 
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		var select = $( "#minbeds" );
		var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
			min: 1,
			max: 6,
			range: "min",
			value: select[ 0 ].selectedIndex + 1,
			slide: function( event, ui ) {
				select[ 0 ].selectedIndex = ui.value - 1;
			}
		});
		$( "#minbeds" ).change(function() {
			slider.slider( "value", this.selectedIndex + 1 );
		});
	});
	</script>
 
 
 
<div class="demo">
 
<form id="reservation">
	<label for="minbeds">Minimum number of beds</label>
	<select name="minbeds" id="minbeds">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
	</select>
</form>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
</div><!-- End demo-description -->

Sa donne une barre donc avec un select.

Une autre version sans le selecte qui affiche juste la valeur.

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
 
<meta charset="utf-8">
 
 
 
 
 
 
 
 
	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-range-min" ).slider({
			range: "min",
			value: 37,
			min: 1,
			max: 700,
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.value );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
	});
	</script>
 
 
 
<div class="demo">
 
<p>
	<label for="amount">Maximum price:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
 
<div id="slider-range-min"></div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>Fix the minimum value of the range slider so that the user can only select a maximum.  Set the <code>range</code> option to "min."</p>
</div><!-- End demo-description -->

Voila en espérant qu'un jour sa aidera quelqu'un. Merci à tous en tout cas.

26/01/2012, 08h34
SpaceFrog

Quand on met des exemples ... ça serait sympa qu'ils fonctionnent !
Il doit manquer un bout de code? un plugin ?

:roll:

Tu peux essayer ce bout de code pour un slider simple

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
<div id="slider">
        <div id="img"></div>
    	<a href="#" id="next" onclick="next()" title="next" >next</a>
    	<a href="#" id="prev" onclick="prev()" title="prev" >prev</a>
    </div>	
 
 
    <script>
 
    	/*Default img*/
    	var img=0;
 
 
    	/*Slider Img*/
    	slider[1] = "<img src='images/slider1.jpg' />";
        slider[2] = "<img src='images/slider2.jpg' />";
 
 
 
        /*Show image*/
        document.getElementById('img').innerHTML=slider[img +=1];
 
 
        function next(){
 
                if(img!=2){
                        img +=1;
                        document.getElementById('img').innerHTML=slider[img];
                }else{		
                        img = 1;
                        document.getElementById('img').innerHTML=slider[img];
                }
        }
 
 
 
 
        function prev(){
 
                if(img!=1){
                        img -=1;
                        document.getElementById('img').innerHTML=slider[img];
                }else{		
                        img = 2;
                        document.getElementById('img').innerHTML=slider[img];
                }
        }
 
 
 
	</script>

J'espère que ça pourra aider