如何为多个noUISlider统一绑定同一个on(change)事件处理函数？

你不需要为每个滑块单独写绑定代码，但必须给每个滑块实例注册同一个回调函数，用循环批量完成注册是成本最低、最易维护的实现方案，没有必要找更绕的“非循环”实现。
noUiSlider 没有提供全局事件监听能力，每个滑块初始化后是独立的实例，事件监听只能挂载在单个实例上，你不需要重复写多份绑定逻辑，只要把所有滑块实例归集到数组里，循环给每个实例绑定同一个处理函数即可。

方案1：保留现有初始化代码，仅优化绑定逻辑 #

如果你不想改动已经写好的滑块初始化代码，直接把所有滑块实例归集后批量绑定即可，求和逻辑直接在公共回调里实现：

// 归集所有已初始化的滑块实例
const allSliders = [
  $('#slider')[0].noUiSlider,
  $('#slider2')[0].noUiSlider,
  $('#slider3')[0].noUiSlider
];

// 公共的change事件处理逻辑
function onSliderChange() {
  // 计算所有滑块的取值总和，注意noUiSlider返回值默认是字符串，需要转数字
  let sum = 0;
  allSliders.forEach(slider => {
    sum += Number(slider.get());
  });

  // 你的测试逻辑
  alert(`滑块触发，当前所有滑块总和为${sum}`);
}

// 批量给所有滑块绑定同一个处理函数
allSliders.forEach(slider => {
  slider.on('change', onSliderChange);
});

方案2：优化初始化逻辑，减少重复代码 #

如果后续还会新增滑块，可以把滑块配置统一管理，初始化和绑定事件一次性完成，后续加滑块只要加配置即可，不用改其他逻辑：

// 统一管理所有滑块的配置
const sliderConfigList = [
  {
    selector: '#slider',
    options: {
      animate: true,
      start: 41,
      step: 5,
      tooltips: [wNumb({decimals: 0})],
      connect: 'lower',
      range: { 'min': 0, 'max': 1000 }
    }
  },
  {
    selector: '#slider2',
    options: {
      animate: true,
      start: 20,
      step: 1,
      tooltips: [wNumb({decimals: 0})],
      connect: 'lower',
      range: { 'min':0, 'max': 100 }
    }
  },
  {
    selector: '#slider3',
    options: {
      animate: true,
      start: 20,
      step: 1,
      tooltips: [wNumb({decimals: 0})],
      connect: 'lower',
      range: { 'min':0, 'max': 100 }
    }
  }
];

const sliderInstances = [];

// 批量初始化+绑定事件
sliderConfigList.forEach(config => {
  const el = document.querySelector(config.selector);
  noUiSlider.create(el, config.options);
  const instance = el.noUiSlider;
  sliderInstances.push(instance);
  instance.on('change', onSliderChange);
});

// 公共处理逻辑
function onSliderChange() {
  let sum = 0;
  sliderInstances.forEach(instance => sum += Number(instance.get()));
  alert(`滑块触发，当前所有滑块总和为${sum}`);
}

• 这种循环绑定的方式完全符合你“共用同一个事件处理函数”的需求，所有滑块触发change时执行的是同一份逻辑，没有冗余代码
• 不推荐用事件委托等“非循环”方式实现，noUiSlider的事件是组件内部触发的自定义事件，做全局委托的复杂度远高于循环批量绑定，没有实际收益
• 后续新增滑块时，只要把新的滑块实例加入对应数组（或新增配置项），不需要修改事件处理和绑定逻辑

内容的提问来源于stack exchange，提问作者Sho Nuff