Javascript 与jqueryui滑块相乘

我正在尝试构建一个类似于此站点上的ui滑块：

我希望能够显示每月值，然后在其旁边显示年度值。（我当然会假设每月的价值乘以12）

从前，我的滑块工作正常，直到我尝试将每月值乘以12

我做错了什么？ （对不起，我对JavaScript一无所知）

这是我的JSFIDLE：

最终，在我弄明白这一点之后，我也在想，在滑块到达某个点后，如何更改滑块和单词的颜色。（如果然后声明？）不确定如何实施

---

在此方面的任何帮助都将不胜感激。谢谢

原始jsFiddle中的大多数问题都可以追溯到错误的jsvar名称；以下是如何达到预期效果：

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

工作中的JSFIDLE，从您的分叉：

如果你用你想做的颜色编码的描述和例子来更新你的问题，我们可以在我们的答案中包括这一点

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


    });

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