添加 css class 到事件的 noUiSlider 句柄

Question

默认情况下，在 start event noUiSlider 上向活动句柄添加活动 class，但在事件结束时将其删除。我想要一种方法向用户显示手柄已被拖动，因此通过 css class 更改颜色将是理想的。

我无法从它提供的数据中判断哪个句柄被拖动了。

这是我启动 noUISlider 的函数

setRangeSlider(e) {
  const min = 0;
  const max = 1000000;
  noUiSlider.cssClasses.target += ' c-range-slider';
  const options = {
    start: [min || 0, max || this.maxAvailablePrice.id],
    step: 50000,
    tooltips: true,
    connect: true,
    range: {
      min,
      max,
    },
    format: {
      to(value) {
        return formatCurrency([value]);
      },
      from(value) {
        return stripFormatting(value);
      },
    },
  };
  this.slider = noUiSlider.create(e, options);

  this.slider.on('start', (values) => {
    console.log('SearchFiltersPriceComponent -> setRangeSlider -> this.slider', this.slider);
  });
}

当我用控制台输出 this.slider from the start event 时，它会打印出各种有用的信息，但我找不到刚刚拖动的句柄以及如何定位该句柄以向其添加 class。

Answer 1

this.slider.target 将 return 滑块元素和 handle 事件回调函数中的参数将 return 已拖动的句柄的索引。所以这两个可以一起使用来定位一个特定的句柄。例如查看代码

setRangeSlider(e) {
  const min = 0;
  const max = 1000000;
  noUiSlider.cssClasses.target += ' c-range-slider';
  const options = {
    start: [min || 0, max || this.maxAvailablePrice.id],
    step: 50000,
    tooltips: true,
    connect: true,
    range: {
      min,
      max,
    },
    format: {
      to(value) {
        return formatCurrency([value]);
      },
      from(value) {
        return stripFormatting(value);
      },
    },
  };
  this.slider = noUiSlider.create(e, options);

  this.slider.on('start', (values, handle, unencoded, tap, positions, noUiSlider) => {
    let sliderElem = this.slider.target;
    let handleElem = document.querySelectorAll("div.noUi-handle[data-handle='" + handle + "']")[0];
    console.log('SearchFiltersPriceComponent -> setRangeSlider -> this.slider', handleElem);
     handleElem.classList.add("mystyle");
  });

  this.slider.on('end', (values, handle, unencoded, tap, positions, noUiSlider) => {
    let sliderElem = this.slider.target;
    let handleElem = document.querySelectorAll("div.noUi-handle[data-handle='"+handle+"']")[0];
    handleElem.classList.remove("mystyle");
   });
}

添加 css class 到事件的 noUiSlider 句柄

Add css class to noUiSlider handle on event

javascript

nouislider