如何使用JavaScript或jQuery实现两个滑块相互影响的滑动条

完整实现代码 #

页面结构 #

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<!-- 给输入框加id方便获取a值，增加基础属性避免非法输入 -->
<input type="number" id="inputA" value="100" min="0" max="200" />
<div id="myRange"></div>

JS逻辑 #

$(function() {
  // 初始化滑块
  $( "#myRange" ).slider({
    range: false,
    min: 0,
    max: 200,
    values: [80, 120],
    slide: function( event, ui ) {
      // 获取用户输入的a值，默认100避免空值报错
      const a = Number($('#inputA').val()) || 100;
      // 获取当前被拖动的滑块索引
      const activeHandleIndex = ui.handleIndex;
      let newX, newY;

      if (activeHandleIndex === 0) {
        // 拖动的是第一个x滑块，计算对应y值
        newX = ui.value;
        newY = 2 * a - newX;
        // 边界处理，y不能超出0~200范围，超出则禁止拖动
        if (newY < 0 || newY > 200) {
          return false;
        }
        // 同步更新第二个y滑块的数值
        $(this).slider('values', 1, newY);
      } else {
        // 拖动的是第二个y滑块，计算对应x值
        newY = ui.value;
        newX = 2 * a - newY;
        // 边界处理，x不能超出0~200范围，超出则禁止拖动
        if (newX < 0 || newX > 200) {
          return false;
        }
        // 同步更新第一个x滑块的数值
        $(this).slider('values', 0, newX);
      }
    }
  });

  // 监听a值输入变化，a修改后自动同步滑块满足联动规则
  $('#inputA').on('change input', function() {
    const a = Number($(this).val()) || 100;
    const currentX = $('#myRange').slider('values', 0);
    const targetY = 2 * a - currentX;
    // 边界校验通过后更新滑块
    if (targetY >=0 && targetY <=200) {
      $('#myRange').slider('values', 1, targetY);
    }
  })
});

核心修改说明 #

• 给数值输入框添加了id标识，方便读取用户输入的a值，同时增加了输入边界限制避免非法值
• 在slide回调中通过ui.handleIndex判断当前被拖动的滑块，根据联动公式计算另一个滑块的数值后主动更新
• 增加了边界校验逻辑，避免计算出的滑块数值超出0~200的范围导致功能异常
• 新增输入框的变化监听，用户修改a值后滑块会自动同步更新，始终满足y = 2a-x的关联关系

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