与Jquery Ui滑块相乘

Question

I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/

I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)

Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.

What did I do wrong? (Sorry I am totally new to JavaScript)

Here is my 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();
            }
        });


    });

Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...

Any help on this is greatly appreciated. Thanks!

Answer 1

Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:

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();
        }
    });

Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/

If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.