Умножение с Jquery Ui Slider

Question

Я пытаюсь построить ползунок щий подобный тому, на этом сайте: http://www.solarcity.com/

Я хочу, чтобы иметь возможность показать месячное значение, а затем ежегодно значение рядом с ним. (Я бы предположить, умножив значение ежемесячно на 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(); 
      } 
     }); 


    }); 

В конечном итоге после того, как я это понял, мне также интересно, как изменить цвет слайдера и слов после того, как ползунок попадает в определенную точку. (Если тогда заявление?) Не знаете, как реализовать ...

Любая помощь на это очень ценится. Благодаря!

Answer 1

Большинство проблем в исходном 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/

Если вы обновляете ваш вопрос с примером описания & из цветового кодирования вы хотите сделать, мы может включать это в наши ответы.