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