Bootstrap 引导滑块-防止翻转两个光标并停止滑动

rggaifut 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(122)

我想使用Bootstrap滑块来表示3个轴的长度，其总和不变（滑块的最大值对应于此总和）。
我在引导滑块上有两个光标，3个区间代表这些长度。
下面是一个例子：bootstrap with two cursors
我的问题是，我想停止拖动第二个光标（在右边）时，它等于（或几乎与固定的步骤）的第一个（在左边）和相反的第一个光标。
我看到有一个幻灯片停止事件，但这似乎不是一回事。
我肯定要修改bootstrap-slider.js源代码，但我不知道如何实现这个特定的功能。
这就像：

slider.on("slide", function(slideEvt) {
if ((cursor2.value - cursor1.value) < step)
  { this.stopSlide();}
});

twitter-bootstrap

来源：https://stackoverflow.com/questions/30746185/bootstrap-slider-prevent-flipping-the-two-cursors-and-stop-slide

1条答案

按热度按时间

jpfvwuh41#

使用幻灯片事件是可能的。这个想法是要看看哪个光标是固定的，当它的值改变，阻止幻灯片移动，通过设置值。没有找到一个更干净的方法来阻止幻灯片事件...
工作代码：

var slider = new Slider("#slider1");

var initPos,
    fixedCursor,
    fixedCursorPos;

slider.on("slideStart", function(slideEvt) {
  initPos = slideEvt;
  fixedCursor = null;
  fixedCursorPos = null;
});

slider.on("slide", function(slideEvt) {
  if (initPos[0] !== initPos[1] && (slideEvt[0] !== initPos[0] || slideEvt[1] !== initPos[1])) {
      if (fixedCursor == null) {
        fixedCursor = (slideEvt[0] === initPos[0] ? 0 : 1);
        fixedCursorPos = slideEvt[fixedCursor];
      }
      if (fixedCursorPos !== slideEvt[fixedCursor]) {
        slider.setValue([fixedCursorPos, fixedCursorPos], false, false);
      }
  }
});

工作JS箱：http://jsbin.com/kopakiciti/1/edit?html,js,output

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 引导滑块-防止翻转两个光标并停止滑动

1条答案

相关问题

热门标签

最新问答