How to multiply jQuery slider value by a defined variable?

Question

I want to multiply the number of minutes per day, whose value is defined by the slider, by a specified number (like 0.05). Then I want to multiply that by 30 so that it is a rough monthly estimate. Then I want to display that value beside my "Estimated Monthly Bill" paragraph near the bottom.

Ex.

monthlyEstimate = slidervalue * .05 * 30

The slider is borrowed from the jQuery UI website. Here is the code:

 <head>
    <script>
$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 1,
        min: 1,
        max: 150,
        slide: function( event, ui ) {
            $( "#amount" ).val( "" + ui.value );
        }
    });
    $( "#amount" ).val( "" + $( "#slider-range-min" ).slider( "value" ) );
     });
</script>

</head>



<body>
    <style>
    #slider-range-min{
    width: 200px;
    height:10px;
    }
    </style>
     <div id="estimate">

    <p>
        <label for="amount">Minutes Per Day:</label>
        <input type="text" id="amount" style="border: 0; color: #B01D63; font-family: Signika;" />
    </p>

    <div id="slider-range-min"></div>
    <br />


 <p>
    Estimated Monthly Bill:     
 </p>

Use the multiplication operator? I'm not sure what the question here is... — Ry-, Nov 18 '12 at 23:12
this would be a perfect scenario for knockout.js and a computed observable... — Alnitak, Nov 18 '12 at 23:13
Should have specified that I know nothing about jQuery... I dont know how to even create a variable. — Evan, Nov 18 '12 at 23:25

3dgoo · Accepted Answer · 2012-11-18T23:37:22.017

1

Add a span below your estimated monthly bill text so we can put the value in to a specified place:

HTML

<p>
    Estimated Monthly Bill:
    <span id="EstimatedMonthlyBill"></span>
</p>

Then change your slider slide property to do the calculation and insert the value:

Javascript

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 1,
        min: 1,
        max: 150,
        slide: function(event, ui) {
            $("#amount").val("" + ui.value);

            var estimatedMonthlyBill = Math.round(100 * (parseFloat(ui.value)  * .05 * 30)) / 100;

            $("#EstimatedMonthlyBill").text(estimatedMonthlyBill);
        }
    });
    $("#amount").val("" + $("#slider-range-min").slider("value"));
});

Demo
http://jsfiddle.net/2FMRU/

edited Nov 18 '12 at 23:37

answered Nov 18 '12 at 23:25

3dgoo

15,716
6
46
58

You're welcome. I've updated the answer to include a demo and Math.round code to overcome the javascript floating point error on the multiplication: http://stackoverflow.com/questions/1458633/elegant-workaround-for-javascript-floating-point-number-problem – 3dgoo Nov 18 '12 at 23:42
I actually came back to this and was wondering how I would round it. Then I saw this. Must have read my mind. Thanks a lot. – Evan Nov 19 '12 at 00:25

score 0 · Answer 2 · answered Nov 18 '12 at 23:25

Change

 <p>
  Estimated Monthly Bill:     
 </p>

To

<p>
 Estimated Monthly Bill: <span id='estimate'></span>
</p>

We will use jQuery to up date the span named estimate when the slider is moved. * is the operator for multiplication in javascript. In the code below, replace SOME_CONSTANT to whatever you need it to be. Most decimal numbers eg. 100.234,0.00005 should work fine.

Change

slide: function( event, ui ) {
        $( "#amount" ).val( "" + ui.value );
    }

To something like this:

slide: function( event, ui ) {
        $( "#amount" ).val( "" + ui.value );
        $("#estimate").val("" + (ui.value*SOME_CONSTANT*30) );
}

When the slider is moved, the <span id='estimate'> will be updated to display the calculated value.

I hope this is what you were looking for.

How to multiply jQuery slider value by a defined variable?

2 Answers2