Help with translating values of a jquery slider

Question

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
e.g.
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;
	maxPensionSacrifice=pension_2008/4;
	pensionSacrifice = maxPensionSacrifice * (lumpSumSlide)/100;
	
	
	
//round off calc to 2 dec places
$("#pension_2008").val(custRound(pension_2008,2));
$("#annualSalary").val(custRound(annualSalary,2));
$("#fsb").val(custRound(fsb,2));
$("#stdlumpSum").val(custRound(stdlumpSum,2));
$("#pensionSacrifice").val(custRound(pensionSacrifice,2));
$("#maxPensionSacrifice").val(custRound(maxPensionSacrifice,2));

} 
//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}

Posted 5-Jan-17 1:23am

Barnsley7

Updated 9-Jan-17 1:52am

Add a Solution

5 solutions

Solution 1

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">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider({
      min: 0,
      max: 100,
      slide: function( event, ui ) {
        $( "#slidervalue").val( ui.value );   
        $( "#pensionSacrifice").val( 5000/4 * ui.value / 100  );
      }
    });
  } );
  </script>
</head>
<body>
<p>
slidervalue: <input type="text" id="slidervalue" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
</p>
<div id="slider"></div>
<p>
pensionSacrifice : <input type="text" id="pensionSacrifice" readonly style="border:0; color:#f6931f; font-weight:bold;" value="0">
</p>
</body>
</html>

See the demo at JSFiddle[^]

Posted 5-Jan-17 1:59am

Peter Leow

Updated 5-Jan-17 2:05am

v3

Solution 2

sorry, here is the entire thing on JS Fiddle:
https://jsfiddle.net/h4fero5o/

Posted 5-Jan-17 2:09am

Barnsley7

Updated 5-Jan-17 2:10am

v2

Solution 3

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)

Posted 5-Jan-17 2:14am

Barnsley7

Solution 4

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

Posted 5-Jan-17 22:29pm

Barnsley7

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Barnsley7 · Accepted Answer · 2017-01-09T01:52:00

Solution 5

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:
https://jsfiddle.net/h4fero5o/10/

Posted 9-Jan-17 1:52am

Barnsley7