JQuery 在单个手柄上触发的滑块事件（滑块范围）

Question

有没有办法根据单个滑块手柄的移动来触发事件？

这会很有趣，因为我需要根据移动的句柄更新日期选择器。问题是我不知道是否真的有办法：

在特定句柄上指定事件
或通过侦听器检索移动句柄的 ID...

这是我的事件当前的触发方式。

$(function() {
      var evt = this.timelineDiv
        .children(".slider")
        .slider({
          min: this.dates.start,
          max: this.dates.end,
          step: 1,
          change: function(event, ui) {
            conditionalDatePickersUpdate();
            },
          slide: function(event, ui) {
            conditionalDatePickersUpdate();
            }
          })
          .slider("pips", {
            rest: "label",
            step: 1
            })
    });

Answer 1

首先；您的设置仅指示一个句柄。对于多个句柄，您需要将 values: Array 设置为一个选项。

其次；您可以使用内置的 ui 对象来检查 handleIndex 和值。

$(function(){
  var values = [1,10];
  var $slider = $(".slider").slider({ 
    values: values, 
    change: handleChanged 
  }).slider("pips");

  // fill in the rest of your setup

});

然后在更改事件触发后，您可以使用以下方法将值与原始值进行比较；

var handleChanged = function( evt, ui ) {
  switch ( ui.handleIndex ) {
    case 0:
      // do something for first handle
      break;
    case 1:
      // do something for second handle
      break;
    case 2:
      // do something for third handle
      break;
  }
};

JQuery 在单个手柄上触发的滑块事件（滑块范围）

JQuery slider event triggered on individual handle (slider range)

javascript

jquery

events

slider

jquery-events