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.

Faire un slider simple

jQuery

Vue hybride

Discussions similaires

Partager

Partager