乘用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的滑块

回答

相关问题