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!

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager