Click here to Skip to main content
15,799,257 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a jQuery slider which the user can drag selecting values from 0-100 (or 1-100).

I want to use the slider value the user selects as a percentage of another variable value.
Its to work out a users pension value and a lump sum value. The idea is that the higher the slider value the greater percentage of the users pension is used as a pension sacrifice which in turn increases their lump sum value.

for example:
fsb = 400000
pension_2008 = fsb/80 - (pensionSacrifice);
slider value = 0 to 100 (set by user)
(maximum value the pensionScarifice can be is a quarter of the pension_2008 value)

then my formula is set as:
pensionSacrifice = parseInt(pension_2008)  /4 *(lumpSumSlide)/100;

the answer (if user slides to 100) should = 1250
pensionSacrifice 5000/4 = 1250
*100 /100 = 1250

however, my pensionSacrifice textbox returns a value of 1001.25 and pension_2008 = 4005.05

and sometimes I get inconsistent results slightly when I move the slider back and forth.
pensionSacrifice should vary from 0 to 1250 (but goes from 0 to 1001)
pension_2008 should vary from 3750 to 5000 (but goes from around 4000 to 5000)

anyone know what is wrong with my formula please?
maybe I should set the min and max value of slider to a variable value rather 0-100 and working it out as a percentage?
I can submit full code if required, but just trying to keep it simple.

What I have tried:

function  doMath() {
//variable = value (declare all variables)
var lumpSumSlide = $("#slidervalue").val(); 
var stdlumpSum = $("#stdlumpSum").val(); 
var pension_2008 = $("#pension_2008").val();
var annualSalary = $("#annualSalary").val();
var fsb = $("#fsb").val();//final salary benefits
var years = $("#years").val();//years they have paid into scheme
var pensionSacrifice = $("#pensionSacrifice").val();//members chosen pension sacrifice
var maxPensionSacrifice = $("#pensionSacrifice").val();//max pension one can give up
//other values - max lump sum/tax free lumpsum etc

//put maths calcs here
	fsb = (annualSalary * years);
	pension_2008 = fsb/80 - (pensionSacrifice); //+parseInt(annualSalary);
	stdlumpSum = pension_2008 * 3;
	pensionSacrifice = maxPensionSacrifice * (lumpSumSlide)/100;
//round off calc to 2 dec places

//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
Updated 9-Jan-17 2:52am

You have given us a long story and a long list of code, but missed the most important part, your jQuery slider code, if your formula is correct, then the culprit will the value coming from your slider. I will start by ascertaining that the value returned from the slider is in the range of 0 to 100, once that is correctly verified, then next look into the formula and the rest of your code and is entirely up to you. But for ascertaining the returned value from slider, you may want to adapt from my demo code below:
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider</title>
  <link rel="stylesheet" href="//">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src=""></script>
  <script src=""></script>
  $( function() {
    $( "#slider" ).slider({
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $( "#slidervalue").val( ui.value );   
        $( "#pensionSacrifice").val( 5000/4 * ui.value / 100  );
  } );
slidervalue: <input type="text" id="slidervalue" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
<div id="slider"></div>
pensionSacrifice : <input type="text" id="pensionSacrifice" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
See the demo at JSFiddle[^]
Share this answer
its ok now. found the problem.
I was using a variable in the calculation before it was declared !
such as this:

pension_2008 = fsb/80 - (pensionSacrifice);

solution here:
Share this answer
sorry, here is the entire thing on JS Fiddle:
Share this answer
So if salary = 20,000 over 20 years...

pensionSacrifice should vary from 0 to 1250 but it goes from 0 to 1001 (or from 12 if min value starts at 1)
pension_2008 should vary from 3750 to 5000 (but goes from around 4000 to 5000)
Share this answer
I was hoping to do something like:

$( "#pensionSacrifice").val( 'variableNameHere'.ui.value);

or setting the min max value to a variable name?

min: 'myVariableName', max: ('MyVariableName'), step: 1, value: 50,

but not sure if this is possible? (trying different things, but nothing working at the moment. Is there a tutorial I can use which will demonstrate the syntax?

thanks for looking
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900