如何在 Javascript 或 jQuery 中创建具有 2 个相互影响的拇指的滑块？

Question

对不起，当我想做这个功能时，那是我第一次学习 jQuery。查询了很多网页和问题，但是这几天一直没能实现。真的希望有人可以帮助我！

我的想法是创建一个带有两个拇指的滑块，如下面的视频所示。当其中一个拇指移动时，另一个也会发生变化（如果一个是x，另一个是y，则用户输入的值是a。那么两者的关系可能是y = 2a-x)

我使用以下.css和jQuery创建了一个滑块（删除了很​​多无用的代码）：

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

  <script>
    $( function() {
      $( "#myRange" ).slider({
        range: false,
        min: 0,
        max: 200,
        values: [80, 120],
        slide: function( event, ui ) {
          var x = ui.values[0];
          var y = ui.values[1];
        }
      });
    });
  </script>

和

<input type="number"/>
<div id="myRange"></div>

Answer 1

考虑以下内容。

$(function() {
  $("#myRange").slider({
    range: false,
    min: -200,
    max: 200,
    values: [80, -80],
    slide: function(event, ui) {
      var x, y, a = parseInt($("#a").val());
      if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
        x = ui.values[0];
        y = (2 * a) - x;
        $(this).slider("values", 1, y);
      } else {
        y = ui.values[1];
        x = (2 * a) - y;
        $(this).slider("values", 0, x);
      }
      $("#x-val").html(x);
      $("#a-val").html(a);
      $("#y-val").html(y);

    }
  });
});

input[type='number'] {
  width: 3em;
}

#myRange {
  margin: 10px;
}

#myRange .ui-slider-handle:nth-of-type(1) {
  margin-top: -10px;
}

#myRange .ui-slider-handle:nth-of-type(2) {
  margin-top: 10px;
}

.log span {
  margin-right: 0.25em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="ui-widget">
  <div class="ui-widget-content" style="margin-bottom: 20px;">
    <label for="a">Enter Number</label>
    <input type="number" id="a" value="0" />
  </div>
  <div id="myRange"></div>
</div>
<div class="log">
  <label>X:</label><span id="x-val">80</span><label>A:</label><span id="a-val">0</span><label>Y:</label><span id="y-val">120</span>
</div>

其中棘手的部分是用户可以抓住任一句柄。知道哪个句柄有焦点可以让我们分配正确的值。

更新

你也可以收紧一点：

$(function() {
  $("#myRange").slider({
    range: false,
    min: -200,
    max: 200,
    values: [80, -80],
    slide: function(event, ui) {
      var a = parseInt($("#a").val());
      if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
        $(this).slider("values", 1, (2 * a) - ui.values[0]);
      } else {
        $(this).slider("values", 0, (2 * a) - ui.values[1]);
      }
    }
  });
});