0

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!

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.