Question

我需要使用三个范围滑块来共享一个共同的“价值池”。所以如果max是100，并且slider-1设置为51.你应该期望slider-2和3从49的共享池中获取。我现在的方式，如果你改变滑块1，滑块2和3是平等的。这不太理想！

你将如何制作它以便我可以将slider-1设置为值“51”，例如，然后将slider-2设置为值“30”，使slider-3自动为“19”。

然后从那里开始，如果我将滑块3的值“19”上升到“20”，滑块-2变为“29.5”，滑块-1变为“50.5”

Here is a jsfiddle, hope my question makes sense:

https://jsfiddle.net/7ho3zfve/

Answer 1

有几点需要注意：首先，您确实在使用冗余代码。如果您稍后决定添加更多输入，那么您将多次执行相同的操作。相反，使用类。您可以使用单个函数或函数集合来处理所有输入，因为所有输入的行为都是相同的。

现在，如果我理解正确，你想要一个设定的最大值，以及尚未手动移动的任何元素，将它们的值设置为剩余最大值的相等部分？下面的代码会这样做。它包括一个可拖动的检测器（基本上，滑块有一个设置isDragging的mousedown事件，而mousemove事件检查它实际上是拖动），这是maxVal的其余部分被拆分的时候。这段代码得到了相当多的评论，它应该能够让您最大程度地了解您正在寻找的内容。

我还没有做过的一件事，也许是一个很大的陷阱，就是当手动设置三个滑块中的两个时，你仍然可以将THIRD滑块向右移动。我猜你想要抓住那个，但我还没有弄清楚那个逻辑。

＆＃13;

var maxVal = 1000,
  isDragging = false,
  fixedEls, flexEls;
/***
 * Tracking the dragging -- on mousedown, I set the isDragging
 *  to true, then I check that for the mousemove on this element.
 *  On mouseup, I reset the isDragging to false, thus ending the
 *  simulated drag event.
 ***/
$(".slide-control").on("mousemove", function() {
  if (isDragging) {
    // I want to keep two collections of sibling elements:
    //  those that have NOT been moved, and those that HAVE.
    //  I simply add the .slider-fixed to those that have,
    //  which are elements I don't want to be moveable later.
    fixedEls = $(this).siblings("input.slider-fixed");
    flexEls = $(this).siblings("input").not(".slider-fixed");
    // The subtotal I will be using is simply the current
    //  slider element plus any elements that have already had
    //  their .slider-fixed class set. The resulting value,
    //  subtracted from the above maxVal, will be the pool of
    //  values for any non-fixed sliders.
    var subtotal = parseInt($(this).val());
    fixedEls.each(function() {
      subtotal += parseInt($(this).val());
    });
    // The sharedVals is the remaining value, evenly split
    //   between all moveable elements.
    var sharedVals = (maxVal - subtotal) / flexEls.length;
    // Set the element's val to that sharedVal.
    flexEls.each(function() {
      $(this).val(sharedVals)
    })
    /***
     * The following lines simply output the values of each slider
     *  to the results pane. Not a necessity, more a debug thing.
     ***/
    $(".results").empty();
    $(this).parent().children("input").each(function() {

      var myHtml = "<p>Slider " + $(this).prop("id") + ": " + $(this).val() + "</p>"
      $(".results").append(myHtml);
    })

  }
}).on("mouseup", function() {
  // When the drag event has ended, set the toggle off.
  isDragging = false;
  // I don't want this particular slider affected by any other
  //  movements.
  $(this).addClass("slider-fixed");

}).on("mousedown", function() {
  isDragging = true;
});

＆＃13;

.slide-control {
  display: block;
  margin-left: 20px;
}

.slider-fixed::before {
  margin-left: -20px;
  content: ">>";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h3>A slider control</h3>
  <h4>Note: &gt;&gt; beside a slider indicates that it won't be affected by any further movement of other sliders.</h4>
</div>

<input type="range" id="myRange" value="0" min="0" max="1000" class="slide-control">
<input type="range" id="myRange2" value="0" min="0" max="1000" class="slide-control">
<input type="range" id="myRange3" value="0" min="0" max="1000" class="slide-control">
<div class="results">

</div>

＆＃13;

Answer 2

在这里找到CumminUp07的图书馆建议：keith-wood.name/linkedsliders.html来完成此任务。

感谢大家在这个帖子上汇总了一些有用的信息和代码。

使用一组范围滑块。修复我的jsfiddle？

2 个答案: