知道2个输入滑块之间的值

Question

我已经提出了这个问题，以创建一个具有2/3输入的滑块。 这是链接：JQuery: a slider with 3 inputs possible?

如何获取所有2个选定输入之间的值？

代码：

$("#slider").slider({
  min: 0,
  max: 100000,
  values: [0, 50000, 100000],
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />

这是html部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>

Answer 1

您可以使用slide事件来检测滑块的值并分别从给定的图片中分配它们

我了解，如果我们有3个滑块x，y和z，则

a=x;

b=x-y;

c=z-y;

您可以从ui事件中传递的slide( event, ui )对象获取滑块值，该事件具有ui.values数组，该数组保存所有滑块手柄当前位置的值，请​​参见演示下面

$("#slider").slider({
  min: 0,
  max: 100000,
  values: [0, 50000, 100000],
  slide: function(event, ui) {
    //console.log(ui.values);
    let a = ui.values[0];
    let b = ui.values[1] - ui.values[0];
    let c = ui.values[2] - ui.values[1];

    $("#a").html(a);
    $("#b").html(b);
    $("#c").html(c);
    
    $("#x").html(ui.values[0]);
    $("#y").html(ui.values[1]);
    $("#z").html(ui.values[2]);
    
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

<ul class="result">
  <li>A : <span id="a">0</span></li>
  <li>B : <span id="b">50000</span></li>
  <li>C : <span id="c">100000</span></li>
</ul>
<ul class="result">
  <li>X: <span id="x">0</span></li>
  <li>Y: <span id="y">50000</span></li>
  <li>Z: <span id="z">100000</span></li>
</ul>