Discussion :

[dudux2]

Salut,

J'aimerais amélioré mon code, car actuellement lorsque je bouge mon slider, j'obtiens une valeur et lorsque je relâche le slider la valeur se décale à 0.5 près.

Donc je suppose que je n'utilise pas la bonne manière de faire.

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
    // Consignes des sondes de temperature 'sliders'
    var mx = unit === '°C' ? 40 : 104;
    var st = unit === '°C' ? 0.5 : 1;
 
    $( '.tempsetpoint' ).slider({range: 0}, { max: mx },{ value: 0 },{step : st});
 
    $( '.tempsetpoint' ).bind( 'slide', function() 
    {
        var sid = $(this).attr('name');
        var setPoint = $( '.tsp'+sid ).slider( 'option', 'value' );
        setPoint = unit === '°C' ? (Number(setPoint).toFixed(1)) : (Number(setPoint*9/5+32).toFixed(0));
		//Show value
		$('#tempsetpoint'+sid).html(setPoint+unit);
        $( '.temp1'+sid ).show();
        $( '.temp2'+sid ).hide();
        $( '.temp3'+sid ).hide();
	});
 
    // Nouvelles consignes des sondes de temperature 'sliders'
    $( '.tempsetpoint' ).bind( 'slidestop', function()
    {
        var sid = $(this).attr('name');
        var setPoint = $( '.tsp'+sid ).slider( 'option', 'value' );
        setPoint = unit === '°C' ? (Number(setPoint).toFixed(1)) : (Number(setPoint*9/5+32).toFixed(0));
 
        $('#tempsetpoint'+sid).html(setPoint+unit);
        $.post(scr+'?do=udp&func=12&to='+sid+'&val=0&valfloat='+setPoint+'&date=0', function(data)
        {
            // Recuperation des donnees dans la variable Reponse[]
            var Response = data.split('|');
            // Si valide on poursuit | Reponse[0]  
            if ( (Response[0] === 'replyUDPtrue') && (Response[1] === 'func=12&to='+sid) )
            {
              $( '.temp1'+sid ).hide();
              $( '.temp2'+sid ).show(); setTimeout( function(){ $( '.temp2'+sid ).fadeOut('slow'); }, 10000 );
              $( '.temp3'+sid ).hide();
            }
            else if ( (Response[0] === 'replyUDPerror') && (Response[1] === 'func=12&to='+sid) )
            {
              $( '.temp1'+sid ).hide();
              $( '.temp2'+sid ).hide();
              $( '.temp3'+sid ).show();
            }
        }); 
    });

Merci d'avance!

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var st = unit === '°C' ? 0.5 : 1;
 
    $( '.tempsetpoint' ).slider({range: 0}, { max: mx },{ value: 0 },{step : st});

[dudux2]

Oui, j'ai bien vu qu'il y avait un lien, mais comment dois-je modifier cela pour que cela fonctionne correctement?

Ce qui te parait évident ne l'ai pas pour moi...

[danielhagnoul]

Si je veux un résultat à n près, j'adopte un intervalle égal à n/2.

Plus l'intervalle est faible, plus le slider doit être long. Je conseille, au minimum, une longueur de 2 pixels par intervalle.

Soit pour un slider allant de 0 à 100, avec un intervalle de 1, une longueur minimum de 200 pixels.

Il faut aussi se rappeler qu'un slider n'est pas un outil précis, si l'on veut que l'utilisateur sélectionne une valeur exacte avec un pas faible, il faut utiliser un input de type number.

[dudux2]

Merci pour ta réponse.

Mon problème n'est pas lié au pixel, (pour avoir tester), si on regarde bien mon code:

Je fais une lecture permanente de la valeur du slider avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( '.tempsetpoint' ).bind( 'slide', function() 
$('#tempsetpoint'+sid).html(setPoint+unit);

et j'affiche à la fois la valeur après avoir relaché le slider:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// Nouvelles consignes des sondes de temperature 'sliders'
$( '.tempsetpoint' ).bind( 'slidestop', function()
$('#tempsetpoint'+sid).html(setPoint+unit);
$.post(scr+'?do=udp&func=12&to='+sid+'&val=0&valfloat='+setPoint+'&date=0')

J'en suis persuadé que ce que je veux faire est faisable et que ce la est juste lié à la mauvaise utilisation des sliders.
J'utilise le slidestop pour ne pas envoyé mon poste en permanence lorsque je bouge mon curseur.

Merci.

[dudux2]

Solution trouvé!

Je poste mon code pour celui qui pourrait être intéressé...

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
    // Consignes des sondes de temperature 'sliders'
    var max = unit === '°C' ? 40 : 104;
    var step = unit === '°C' ? 0.5 : 1;
 
    $( '.tempsetpoint' ).slider(
    {
        min: 0, min: 0, max: max , step : step, animate: 'slow',
        slide: function (event, ui)
        {
            var sid = $(this).attr('name');
            var setPoint = ui.value
            setPoint = unit === '°C' ? (Number(setPoint).toFixed(1)) : (Number(setPoint*9/5+32).toFixed(0));
            //Show value
            $('#tempsetpoint'+sid).html(setPoint+unit);
            $( '.temp1'+sid ).show();
            $( '.temp2'+sid ).hide();
            $( '.temp3'+sid ).hide();
        },
        // Nouvelles consignes des sondes de temperature 'sliders'
        stop: function (event, ui)
        {
            var sid = $(this).attr('name');
            var setPoint = $( '.tsp'+sid ).slider('value');
            setPoint = unit === '°C' ? (Number(setPoint).toFixed(1)) : (Number(setPoint*9/5+32).toFixed(0));
 
            $('#tempsetpoint'+sid).html(setPoint+unit);
            $.post(scr+'?do=udp&func=12&to='+sid+'&val=0&valfloat='+setPoint+'&date=0', function(data)
            {
                // Recuperation des donnees dans la variable Reponse[]
                var Response = data.split('|');
                // Si valide on poursuit | Reponse[0]  
                if ( (Response[0] === 'replyUDPtrue') && (Response[1] === 'func=12&to='+sid) )
                {
                    $( '.temp1'+sid ).hide();
                    $( '.temp2'+sid ).show(); setTimeout( function(){ $( '.temp2'+sid ).fadeOut('slow'); }, 10000 );
                    $( '.temp3'+sid ).hide();
                }
                else if ( (Response[0] === 'replyUDPerror') && (Response[1] === 'func=12&to='+sid) )
                {
                    $( '.temp1'+sid ).hide();
                    $( '.temp2'+sid ).hide();
                    $( '.temp3'+sid ).show();
                }
            }); 
        }
    });

Bien programmé le slider peut être un outil précis!