Javascript (jquery.ui.slider) - Alternative to current global method? -

Javascript (jquery.ui.slider) - Alternative to current global method? -

basic javascript question - alternative current global method?

i'll start off saying don't have big amount of experience javascript, have 'dabbled' on , off many years (mostly basic jquery powered things , form calculations).

currently putting calculator jquery.ui based slider. have functioning well, lastly night nail problem had utilize global variables work around, , while works now, don't sense right solution.

i started off line in calculation function outside of slider, beingness called on slide event within slider. have moved math within slider, it's used other things , i'd prefer maintain outside function can phone call when needed:

savings = math.round(cost[$('.selectable-div.selected').attr('id')] * $( "#slider-gallons" ).slider( "value" ); );

... end calculating based on wherever slider 'started', not was, presumably because "value" changed after slider moved, not during? if on position 1, , moved 2, display me result 1. when moved position 2 position 3, display result position 2. when moved 3 2, display me result position 3 (whichever 'last' on).

i had little piece of code within slider using ui.value, update in real-time, position 1 showed 1, position 2 showed 2, etc. question stems, don't know how phone call "slider gallons" ui.value outside of slider function (i.e. within calculate function).

as work-around, defined ui.value global variable "var_slider_gallons_pos" , called this:

savings = math.round(cost[$('.selectable-div.selected').attr('id')] * var_slider_gallons_pos );

it works great, i'm not happy it. there way this, i.e. (and know code below doesn't work, pipe-dream illustration of looking for). want can phone call on slider ui.value straight without needing variables floating around.

savings = math.round(cost[$('.selectable-div.selected').attr('id')] * $( "#slider-gallons" ).slider( ui.value ); );

i don't know if makes sense, i'm trying phone call slider element's ui.value without having first create variable within slider event.

i'm sure basic element i'm overlooking because not versed in javascript, can help me out.

edit: completeness, here total slider , calculator code using.

slider:

$( "#slider-gallons" ).slider({ value:250, min: 250, max: 3000, step: 250, slide: function( event, ui ) { var_slider_gallons_pos = ui.value; $( "#slider-gallons-amount" ).html( "your facility produces <span>" + var_slider_gallons_pos + "</span> gallons of waste oil each year"); recalculatesavings(); } }); /* these lines exist populate text values on load */ /* var_slider_gallons_pos part differently here */ var_slider_gallons_pos = $( "#slider-gallons" ).slider( "value" ); $( "#slider-gallons-amount" ).html( "your facility produces <span>" + $( "#slider-gallons" ).slider( "value" ) + "</span> gallons of waste oil each year");

and calculate function:

function recalculatesavings() { var cost = { 'calc-choice-natural-gas': 1.53, 'calc-choice-electric': 4.86, 'calc-choice-propane': 4.37, 'calc-choice-fuel-oil': 3.74 }; /* line causing me grief */ savings = math.round(cost[$('.selectable-div.selected').attr('id')] * var_slider_gallons_pos ); $('#savings-calculator .calc-savings-one-year .savings').html('$' + formatnumber(savings)); $('#savings-calculator .calc-savings-multiple-years .savings').html('$' + formatnumber(savings * var_slider_years_pos )); }

i found way!

i still not sure if best way it, i'm satisfied it.

i added next code slide function, above "recalculatesavings();"

$(this).slider('value', ui.value);

and used in math function.

$( "#slider-gallons" ).slider( "value" );

this must forcefulness value updated ui.value before moving on recalculate piece, seems trick real time updating of calculation result. allowed me rid of global functions.

javascript jquery jquery-ui uislider