Récupérer les valeurs d'un slider range

Version imprimable

Bonjour à tous,

je tente de faire apparaitre une valeur calculé automatiquement par rapport à 2 sliders.

Voici mon code :

Code:

1
2
3
4
5
6
<body>
<input type="text" id="amountA" name="amountA"/>
<input type="text" id="amountB" name="amountB"/>
<input type="text" id="amountC" name="amountC"/>
<div id="sliderA"></div><br />
<div id="sliderB"></div><br />

Code:

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
$(function(){
    $("#sliderA").slider({
        range: "min",
        value: 500,
        min: 500,
        max: 1000,
        step: 1,
        slide: function(event, ui) {
            $("#sliderB").slider("value", 1 + 0.38431089 * ((Math.log($("#sliderA").slider("value"))-Math.log(500))/Math.log(10)));
            updateValues();
        }
    }); 
   $("#sliderB").slider({
        range: "min",
        value: 1,
        min: 1,
        max: 1.30,
        step:0.00001,
        slide: function(event, ui) {
        	$("#sliderA").slider("value", 500* Math.exp(($("#sliderB").slider("value")-1) * 5.9914646));
            updateValues();
        }
    });
});
function updateValues(){
    $("#amountA").val($("#sliderA").slider("value"));
    $("#amountB").val($("#sliderB").slider("value"));
}
function calculmontant(){
	var a = document.getElementById('amountA').value;
	var b = document.getElementById('amountB').value;
	var c = Math.round(a*b);
	if(a=='')
    c = 0;
    if(b == '')
    c = 0;
	document.getElementById('amountC').value = c;
}

La valeur calculé doit apparaitre dans l'id "amount C". Elle est égale à la valeur A * valeur B.

Pouvez-vous me venir en aide svp ?

19/03/2014, 20h14
SylvainPV

Bonjour,

Je ne connais pas tous les plug-ins jQuery du monde par coeur, peux-tu me dire lequel tu utilises ? Et sinon, où appelles-tu ta fonction calculMontant ?

Sinon pour l'élément en cours de standardisation <input type="range" multiple>, c'est :
input.value.split(',') // renvoie une Array [a,b] avec a plus petit que b

Val sur sélecteur :

Code:

1
2
3
4
5
6
7
8
function updateValues(){
$("#amountA").val($("#sliderA").slider("value"));
$("#amountB").val($("#sliderB").slider("value"));
var a = document.getElementById('amountA').value;
var b = document.getElementById('amountB').value;
var c = Math.round(a*b);
$('#amountC').val(c);
}

20/03/2014, 21h19
blayan

merci à vous 2 pour vos réponses,
bm ça marche impeccable donc un gros merci!

Bonjour,
que viens faire un document.getElementById dans du code jQuery ?

Code:

1
2
3
4
5
6
7
8
function updateValues(){
  var a = $("#sliderA").slider("value"),
      b = $("#sliderB").slider("value"),
      c = Math.round(a*b);
  $("#amountA").val(a);
  $("#amountB").val(b);
  $('#amountC').val(c);
}

21/03/2014, 06h26
blayan

merci NoSmoking, ça fonctionne très bien également!

Deux slider indépendants :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
    $("#sliderA").slider({
        range: "min",
        value: 500,
        min: 500,
        max: 1000,
        step: 1,
        slide: function(event, ui) {
            $("#sliderA").val( "$" + ui.value );
            updateValues();
        }
    }); 
   $("#sliderB").slider({
        range: "min",
        value: 1,
        min: 1.00000,
        max: 1.30000,
        step:0.00001,
        slide: function(event, ui) {
        	$("#sliderB").val( "$" + ui.value );
        	updateValues();
        }
    });
});

22/03/2014, 22h58
blayan

Bonsoir,
je reviens vers vous car je rencontre un autre problème, lié au premier.
J'aimerais qu'en entrant directement une valeur dans mon input c, les deux sliders s'ajustent automatiquement. Faire une sorte de réciproque à mon premier code.
Savez-vous si c'est possible ?
Merci d'avance!
23/03/2014, 09h06
NoSmoking
Citation:

Savez-vous si c'est possible ?

aucune raison que cela ne fonctionne pas sauf que....
Code:

1 2 3 4 c = a * b // d'après la fonction updateValues // donc on a a = c / b b = c / a
il va donc être difficile d'affecter des valeurs pertinentes à a et à b.