乘用jQuery UI的滑塊

我試圖建立類似本網站上的一個UI滑塊：http://www.solarcity.com/乘用jQuery UI的滑塊

我希望能夠表現出月度出口值，然後旁邊有一個每年價值。很久以前我有我的滑塊正常工作，直到我試圖乘12

月度出口值我做了什麼錯了一次（我將承擔每月的值乘以當然12）

？（對不起我完全新的給JavaScript）

這裏是我的jsfiddle：http://jsfiddle.net/7qDyq/1/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year 

     <div id="bill_slider"> 

     </div>

$(document).ready(function(){ 

     function update() { 
      var bill_slider = $('#bill_slider').slider('value'); 
      var yearly_bill = (monthly_bill * 12) 


      $("#monthly_bill").text(tasks_time); 
      $("#monthly_bill").text(tasks_done); 


     } 

     $("#bill_slider").slider({ 
      value: 1, 
      min: 0, 
      max: 450, 
      step: 5, 
      slide: function() { 
       update(); 
      } 
     }); 


    });

最終在我弄清楚這一點後，我也想知道如何在滑塊擊中特定點後更改滑塊和單詞的顏色。（如果然後陳述？）不知道如何實現...

任何幫助，這是非常感謝。謝謝！

來源

2014-06-11 TheSynnott

你原來的jsFiddle中的大多數問題都追溯到壞的JS var名稱;這裏是你將如何達到預期的效果：

function update() { 
     var bill_slider = $('#bill_slider').slider('value'); 
     var yearly_bill = (bill_slider * 12) 
     $("#monthly_bill").text(bill_slider); 
     $("#yearly_bill").text(yearly_bill); 
    } 

    $("#bill_slider").slider({ 
     value: 1, 
     min: 0, 
     max: 450, 
     step: 5, 
     slide: function() { 
      update(); 
     } 
    });

工作的jsfiddle，從你的分叉：如果你的描述&例如更新您的問題http://jsfiddle.net/6Bprf/5/

顏色編碼你想要做的，我們可以在我們的答案中包含這個。

來源

2014-06-11 19:23:18 Stevangelista

乘用jQuery UI的滑塊

回答

相關問題