Faire un slider simple [Résolu]

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

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

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 ?

24/01/2012, 08h46	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 079 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 079 Points : 45 213 Points : 45 213	http://javascript.developpez.com/faq...derAutomatique __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/01/2012, 16h14	#3
minipopov Candidat au titre de Membre du Club Inscription : juillet 2011 Messages : 38 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juillet 2011 Messages : 38 Points : 14 Points : 14	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?
	00

24/01/2012, 21h40	#5
minipopov Candidat au titre de Membre du Club Inscription : juillet 2011 Messages : 38 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juillet 2011 Messages : 38 Points : 14 Points : 14	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?
	00

24/01/2012, 21h49	#6
minipopov Candidat au titre de Membre du Club Inscription : juillet 2011 Messages : 38 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : juillet 2011 Messages : 38 Points : 14 Points : 14	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.
	00

26/01/2012, 08h34	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 079 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 079 Points : 45 213 Points : 45 213	Quand on met des exemples ... ça serait sympa qu'ils fonctionnent ! Il doit manquer un bout de code? un plugin ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email