Discussion :

[aloisio11]

Bonjour à tous,

J'utilise la Range Slider de jQuery pour sélectionner 2 valeurs sur une échelle.
Sur cette échelle j'affiche la valeur de la poignée pour savoir à combien on en est.
Cela fonctionne parfaitement sauf qu'avec la poignée supérieure quand je me positionne 1 cran au dessus de la poignée inférieur et que je descend d'un cran la poignée supérieur et bien le label, ou tooltip, ne change pas, je ne comprends pas pourquoi.
Voici une illustration plus parlante :


Voici mon javascript :

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
 
    <link rel="stylesheet" href="scripts/jQuery/themes/base/jquery.ui.all.css">
	<script src="scripts/jQuery/jquery-1.7.1.js"></script>
	<script src="scripts/jQuery/ui/jquery-ui-1.8.18.custom.js"></script>
 
<script language="javascript" type="text/javascript">    
    $(function() {    
        var vStepsTaillememoire = ['2 Go', '4 Go', '8 Go', '16 Go', '32 Go', '64 Go', '128 Go', '256 Go'];      
 
	    var rangeSlider = $( "#SliderRange_Taillememoire" ).slider({
		    range: true,
		    orientation: 'vertical',
		    min: 0,
		    max: vStepsTaillememoire.length - 1,
		    step: 1,
		    values: [ 0, 8 ],
		    slide: function( event, ui ) {
			    UpdateSliderLabels(ui, ["#sliderValMin_Taillememoire", "#sliderValMax_Taillememoire"], vStepsTaillememoire);
		    },
		    change : function(event, ui) {
                UpdateSliderLabels(ui, ["#sliderValMin_Taillememoire", "#sliderValMax_Taillememoire"], vStepsTaillememoire);
            }
	    });
	    $( "#ctl00_PagePrincipale_JaugeTailleMemoire_txtVal1" ).val( $( "#SliderRange_Taillememoire" ).slider( "values", 0 ));
	    $( "#ctl00_PagePrincipale_JaugeTailleMemoire_txtVal2" ).val( $( "#SliderRange_Taillememoire" ).slider( "values", 1 ) );
 
	    $('.ui-slider-handle').height(10) //Hauteur des taquets			
	    $('#SliderRange_Taillememoire').height(200) //Hauteur de la barre complète	
});
 
function UpdateSliderLabels(ui, valueLabels, pListeVal) {
    if (!ui.values)
        ui.values = [ui.value];
    // need to be able to determine which of the handles actually changes
    var index = $.inArray(ui.value, ui.values);
    var myAlign = index == 0 ? "right" : "left";
    var atAlign = index == 0 ? "left" : "right";
    $(valueLabels[index])
        .position({
            my: myAlign + " center",
            at : atAlign + " center",
            of: ui.handle
            })
        .text(pListeVal[ui.value]);
    return;
}
</script>

Par contre ce problème n'apparait pas dans l'autre sens, que la poignée inférieur monte sur la supérieur.

Quelqu'un pourrait m'aider ?

Mille mercis d'avance ...

[aloisio11]

Problème résolu, désolé ...

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
function UpdateSliderLabels(ui, valueLabels, pListeVal, pForceIndex) {
    if (!ui.values)
        ui.values = [ui.value];
    // need to be able to determine which of the handles actually changes
    var index;
 
    if (typeof pForceIndex == 'undefined') {
        index = $.inArray(ui.value, ui.values);
    } else {
        index = pForceIndex;
    }
 
    var myAlign = index == 0 ? "right" : "left";
    var atAlign = index == 0 ? "left" : "right";
    $(valueLabels[index])
        .position({
            my: myAlign + " center",
            at : atAlign + " center",
            of: ui.handle
            })
        .text(pListeVal[ui.value]);
 
    //si on est sur la même valeur on fait le traitement pour l'autre poignée
    if (ui.values[0] == ui.values[1] && typeof pForceIndex == 'undefined') {
        UpdateSliderLabels(ui, valueLabels, pListeVal, 1)
    }
 
    return;
}