Chrome控制台JS设置滑块后，点击滑块致另一滑块隐藏值重置的解决方法

核心原因 #

页面自带的滑块交互脚本，在调整slider1时会触发重置slider2隐藏值的关联逻辑，这是默认的绑定行为，需要通过JS干预阻断或修改该逻辑。

具体解决方法 #

方法1：移除并替换slider1的事件监听 #

找到slider1上触发重置的事件，直接移除后绑定自定义逻辑，避免影响slider2：

// 定位slider1元素（替换为实际的选择器，比如对应class）
const slider1 = document.querySelector('.evl-slider1');
// 获取slider1上的所有事件监听（仅Chrome控制台支持getEventListeners）
const inputListeners = getEventListeners(slider1)?.input || [];
// 移除原有input事件监听
inputListeners.forEach(listener => {
  slider1.removeEventListener('input', listener.listener);
});
// 绑定自定义input事件，只处理slider1自身的逻辑
slider1.addEventListener('input', function(e) {
  // 更新slider1对应的隐藏值
  const slider1Val = e.target.value;
  document.querySelector('.evl-slider1-value-field').value = slider1Val;
  // 不触碰slider2的任何值
});

方法2：用监听强制恢复slider2的隐藏值 #

如果找不到具体的重置事件，用MutationObserver监听slider2隐藏值的变化，一旦被重置为0就恢复之前的设置值：

// 保存slider2当前的有效值
let slider2SavedVal = document.querySelector('.evl-slider2-value-field').value;
// 创建监听实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'value' && mutation.target.value === '0') {
      // 强制恢复为保存的值
      mutation.target.value = slider2SavedVal;
    }
  });
});
// 启动监听
observer.observe(document.querySelector('.evl-slider2-value-field'), { attributes: true });

// 注意：之后手动修改slider2值时，记得同步更新slider2SavedVal

方法3：直接覆盖页面原生交互函数 #

如果能找到页面中处理滑块逻辑的原生函数，直接重写它去掉重置slider2的代码：

// 假设页面原生处理函数是handleSliderUpdate
function handleSliderUpdate(sliderType) {
  if (sliderType === 'slider1') {
    // 保留slider1的处理逻辑，删除原代码中重置slider2的语句
    const slider1Val = document.querySelector('.evl-slider1').value;
    document.querySelector('.evl-slider1-value-field').value = slider1Val;
  }
}

在Chrome控制台执行这段代码，覆盖原函数即可。

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