Search code examples
javascriptjquery-uicalculatoruislider

Can a JQuery slider work with a simple calculation function?

I'm trying to get a JQuery slider to work with a simple calculation function.

I have the slider working with an input text box and it shows the value selected by the user.

I also have another example of a simple calculation being done when the user enters a value into an input textBox and clicks a calculate button.

What I'd like to happen is - when the user drags the slide bar - not only display the value from the slidebar (which it currently does), but take that value into the calculator box (and ideally work when the user drags the bar and not when they click on the button).

I'm not sure how to do this. Anyone got any ideas please?

This is the slider with the Text value Box shown:

<html lang="us">
<head>
	<title>jQuery Example slider2</title>
	
	<!--uses these local .js and css files for the main slider-->
	<link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
	<script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
	<script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
	</head>

<body>
Slider
<div id="slider"></div>

<!--result box-->
<input id="slidervalue" type="text"> (min: 100, max: 5000)<br />


<!--main slider function-->
<script type="text/javascript">
$(function () {
  $("#slider").slider({
    min: 100, max: 5000, step: 50, value: 100,
    slide: function( event, ui ) {
      $("#slidervalue").val(ui.value);
    }
  });
  var initialValue = $("#slider").slider("option", "value");
  $("#slidervalue").val(initialValue);
  $("#slidervalue").change(function() {
    var oldVal = $("#slider").slider("option", "value");
    var newVal = $(this).val();
    if (isNaN(newVal) || newVal < 10 || newVal > 100) {
      $("#slidervalue").val(oldVal);
    } else {
      $("#slider").slider("option", "value", newVal);
    }
  });
});
</script>

</body>
</html>

Example of the calculation: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HEAD>
 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function  doMath() {
//variable = value (declare all variables)
var userInput = eval(document.myform.userInput.value)
var testLump = eval(document.myform.testLump.value)

//output box = variable
var testLump_ans = testLump;

//put maths calcs here
if ( userInput>10) {
	testLump = (userInput*10)/5 ;
	}
	else {
	testLump = (userInput*2)/5 ;
	}

//round off calc to 2 dec places
document.myform.testLump.value=custRound(testLump,2);
document.myform.userInput.value=custRound(userInput,2);
}
//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>
</HEAD>


<BODY>
<FORM NAME="myform">
<table>
<tr>
    <td>User Input</td>
    <td><input type="text" name="userInput" size="10" value="0" style="text-align:right ">    </td>
	</tr>
  
	<tr>
		<td>testLump 
		<div align="right"></div></td>
		<td>
		<input type="text" name="testLump" size="10" value="0" style="text-align:right ">    <br />
		</td>
	</tr>
	
	<tr>
	<td>
	  <input name="reset" type="reset" value="Reset" >  
      <input type="button" value="Calculate" onClick="doMath ()">
    </td>
	</tr>
</table>
</FORM>

Thanks.

Solution

  • Not sure what exactly your doMath function should do, but inside the slide function of the slider you can run this function and make sure it does all the changes you need.

    Here is an example:

    function  doMath() {
  //variable = value (declare all variables)
  var userInput = $("#slidervalue").val();
  var testLump = $("#calcvalue").val();

  //output box = variable
  var testLump_ans = testLump;

  //put maths calcs here
  if ( userInput>10) {
    testLump = (userInput*10)/5 ;
  }
  else {
    testLump = (userInput*2)/5 ;
  }

  //round off calc to 2 dec places
  $("#calcvalue").val(custRound(testLump,2));
}
//round off function
function custRound(x,places) {
  return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}

$(function () {
  $("#slider").slider({
    min: 100, max: 5000, step: 50, value: 100,
    slide: function( event, ui ) {
      $("#slidervalue").val(ui.value);
      doMath()
    }
  });
  var initialValue = $("#slider").slider("option", "value");
  $("#slidervalue").val(initialValue);
  $("#slidervalue").change(function() {
    var oldVal = $("#slider").slider("option", "value");
    var newVal = $(this).val();
    if (isNaN(newVal) || newVal < 10 || newVal > 100) {
      $("#slidervalue").val(oldVal);
    } else {
      $("#slider").slider("option", "value", newVal);
    }
  });
});
    <html lang="us">
<head>
	<title>jQuery Example slider2</title>
	
	<!--uses these local .js and css files for the main slider-->
	<link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
	<script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
	<script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
	</head>

<body>
Slider
<div id="slider"></div>

<!--result box-->
<input id="slidervalue" type="text"> (min: 100, max: 5000)<br /><br />
calc value: <input id="calcvalue" type="text"><br /><br />


<!--main slider function-->
<script type="text/javascript">

</script>

</body>
</html>