Discussion :

[casa_sniper]

Bonjour ,
je bosse sur un petit projet web ,
je dois developper un simulateur avec 2 scroller liés a un champs de text , et je trouve des diffucltés dans la mise en forme sur les objets DOM ,
pourriez vous m'indiquer des liens utiles (tutoriels ou des exemples avec scripts )

Merci d'avance

[SpaceFrog]

mise en forme ?
tu peux préciser ?

[casa_sniper]

la mise en style CSS et leurs manipulations en jquery
vu que je suis un peu débutant en jquery et le DOM ,
j'arrive pas a comprendre le fonctionnement des elements et comment les manipuler avec les fonctions jquery

je veux bien commencer a partir d'un exemple clair pour les customiser
le besoin c'est : un simulateur qui contient 2 scrollers representant 2 intervales et qui sont liés : quand on modifier l'un des 2 l'autre est modifieé , et un champs text qui affiche la valeur du 1 scroller

[casa_sniper]

Voila en image le besoin que je cherche a realiser

[SpaceFrog]

pour le style ...

http://api.jquery.com/css/

[casa_sniper]

Bonjour SpaceFrog .. merci pour votre lien .. ca m'a bcp aidé .. j'ai utilisé un composant ui slider ...
sinon j'ai une autre question que je n'ai pas pu trouvé la solution sur les forums,

est ce que c'est possible de mettre 2 ranges autour d'un seul handle (un a gauche et l'autre a droite).. c'est oui ,comment le faire ?

merci d'avance ,

[SpaceFrog]

est ce que c'est possible de mettre 2 ranges autour d'un seul handle (un a gauche et l'autre a droite)..

J'avoue ne pas avoir compris la question

[casa_sniper]

Merci pour ton retour

aufait dans un slider on peut avoir un handle par defaut qu'on le met soit a gauche ou a droite en affectant soit "min" ou "max" a l'attribut range

mon besoin c'etait d'avoir un peu prés 2 handle comme montré dans la piéce en joint
je l'ai déja fait en imbriquant une div , qui bouge avec l'indicateur(le handle) en changeant ses dépensions dans l’événement du slider (la piéce en joint)

maintenant ce que je cherche a faire et j'ai pas trouvé comment faire .. c'est d'afficher des graduations sur le slider (au dessous par exemple)

cdt

[casa_sniper]

j'ai un autre petit souci si vous me permettez ,

est ce que c'est possible de faire un echel en le coddant (sans utiliser une image mis au dessous du slider )??
et est ce que c'est possible de faire une limite (un minimum et un maximum ) a ne pas dépasser a un certaine valeur du slider , pas exemple (ne pas permettre a l’utilisateur de dépasser la valeur max -50)


merci par avance
je mets un bout de mon code du slider pour vous donner une idée plus claire :

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
$(function() {
        var select1 = $( "#MensId" ); 
		var select2 = $( "#DureId" );
			tooltip1 = $("#indic1");
			tooltip2 = $("#indic2");
 
			tooltip1.hide();  
			tooltip2.hide();  
 
        $( "#slider2" ).slider({
            range: 'min',
            value:2,
            min:1,
            max:4,
			step:0.01,
			start: function(event,ui) {
					tooltip1.fadeIn('fast');
					tooltip2.fadeIn('fast');
			},
 
            slide: function( event, ui ) {
 
                select1[ 0 ].selectedIndex = ui.value - 1;
				select2[ 0 ].selectedIndex = ui.value - 1;
 
 
 
 
                var pos  = $('.ui-slider-handle:last').position();
                tooltip1.css('left', pos.left-70 ).text($("#DureId > option:selected").text());
                tooltip2.css('left', pos.left+50 ).text($("#MensId > option:selected").text());
            },
			stop: function(event,ui) {  
				tooltip1.fadeOut('fast');  
				tooltip2.fadeOut('fast');  
			}, 	
        });
 
		select1.change(function() {	
			$( "#slider2").slider( "value", this.selectedIndex + 1 );	
		});
 
		select2.change(function() {
			$( "#slider2").slider( "value", this.selectedIndex + 1 );
		});