Faire un slider simple

**minipopov** · 23/01/2012, 22h48

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 :

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>
		<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.

**SpaceFrog** · 24/01/2012, 08h46

http://javascript.developpez.com/faq...derAutomatique

**minipopov** · 24/01/2012, 16h14

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?

**SpaceFrog** · 24/01/2012, 16h43

ha un peu le principe du spinner ...

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
<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>

**minipopov** · 24/01/2012, 21h40

Donc oui sa ressemblerait un peu a sa. Sauf qu'avec ce code je peux pas récupéré la valeur de la barre?

**minipopov** · 24/01/2012, 21h49

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.

**SpaceFrog** · 25/01/2012, 08h22

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

**minipopov** · 25/01/2012, 16h56

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 :

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
 
<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 :

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
 
<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.

**SpaceFrog** · 26/01/2012, 08h34

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

**Nemo72** · 29/05/2016, 17h56

Tu peux essayer ce bout de code pour un slider simple

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
<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

Faire un slider simple

jQuery

Discussions similaires

Partager

Partager