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

**blayan** · 19/03/2014, 18h18

Bonjour à tous,

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

Voici mon code :

Code html :

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

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 :

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
$(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 ?

**SylvainPV** · 19/03/2014, 20h14

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

bm · 20/03/2014, 18h08

Val sur sélecteur :

Code :

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

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);
}

**blayan** · 20/03/2014, 21h19

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

**NoSmoking** · 20/03/2014, 21h48

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

Code :

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

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);
}

**blayan** · 21/03/2014, 06h26

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

bm · 21/03/2014, 11h37

Deux slider indépendants :

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
$(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();
        }
    });
});

**blayan** · 22/03/2014, 22h58

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!

**NoSmoking** · 23/03/2014, 09h06

Savez-vous si c'est possible ?

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

Code :

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

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.

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

jQuery

Discussions similaires

Partager

Partager