JQuery 滑块可以使用简单的计算功能吗？

Question

我正在尝试让 JQuery 滑块使用简单的计算功能。

我让滑块与输入文本框一起工作，它显示用户选择的值。

我还有另一个简单计算的例子，当用户在输入文本框中输入一个值并单击计算按钮时进行计算。

我想要发生的是 - 当用户拖动滑动条时 - 不仅显示滑动条的值（它当前显示），而且将该值放入计算器框（理想情况下工作时用户拖动栏而不是当他们点击按钮时）。

我不知道该怎么做。有人有什么想法吗？

这是显示文本值框的滑块：

<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>

计算示例：

<!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>

谢谢。

Answer 1

使用幻灯片功能。下面的示例使用从 0 到 100 的范围，步长为 1，初始值从 100 开始。每次用户滑动滑块时，函数 doTheCalc() 都会运行传递当前滑块值。

$("#theSelector").slider(
    {   min: 0, 
        max: 100,
        step: 1,
        value: 100,
        slide: function(e, ui) {  
            $('#inputElement").value(ui.value)
            doTheCalc(ui.value)
        }

    }
);

Answer 2

不确定您的 doMath 函数究竟应该做什么，但是在 slider 的 slide 函数中，您可以运行这个函数并确保它完成所有工作您需要的改变。

这是一个例子：

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>

JQuery 滑块可以使用简单的计算功能吗？

Can a JQuery slider work with a simple calculation function?

javascript

jquery-ui

calculator

uislider