Цифровой слайдер JS с расчетом

Question

Цифровой слайдер JS с расчетом

0

Я выяснил, как настроить фиксированный максимальный слайдер (в этом случае 1-99)

Теперь то, что я пытаюсь сделать, это связать другую, отдельную функцию с тем, что вычисляет экономию. В основном это вычислить номер ползунка x.8 (сохранение) x 365 (дней) или:

x (переменная ползунка) * y * z

Проблема в том, что я не могу получить x, чтобы получить значение ползунка

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed maximum</title>
<link rel="stylesheet" href="/jquery-ui.css">
<script src="/jquery-1.9.1.js"></script>
<script src="/jquery-ui.js"></script>

<script>
$(function() {
$( "#slider-range-max" ).slider({
  range: "max",
  min: 1,
  max: 99, 
  value: 2,
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

  });

$(function() {
{
x=20; /* This is the variable #amount */
y=.8;
z=365;
a=x*y*z;
document.getElementById("product").innerHTML=a;
}

}); 


</script>


</head>
<body>

<p>
<label for="amount">Per Day:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<br/>

<p id="result">
You save $<span id="product"></span>
</p>

</body>
</html>

Я только что положил x = 20, чтобы убедиться, что расчет работает, и что он делает.

user3044534 28 нояб. 2013, в 07:23

Источник

Теги:

javascript

jquery

jquery-ui

calculator

1 ответ

Ещё вопросы

G.Mendes · Accepted Answer · 2013-11-28T10-38-00.000Z

если я хорошо понял ваш вопрос, вы хотите сделать расчет сразу после изменения значения ползунка, тогда вы захотите сделать этот вычет внутри события слайда слайдера, используя немного функциональности jquery, вам не понадобится второй блок вашего кода, блок сценария будет выглядеть так:

$(function() {
 $( "#slider-range-max" ).slider({
   range: "max",
   min: 1,
   max: 99, 
   value: 2,
   slide: function( event, ui ) {
     $( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
     var x=$("#amount").val(); //this way you access slider value anywhere in your code
     var y=.8;
     var z=365;
     var a=x*y*z;
     $("#product").html(a); 
   }
 });
   $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

});

Прекрасно - это имеет больше смысла теперь, когда я могу видеть все это там. Большое спасибо