如何实现输入框值变更时同步更新jQuery UI滑块及解决相关报错

问题根因 #

报错$(...).slider is not a function的核心原因是仅引入了jQuery基础库，没有引入jQuery UI的依赖文件，slider是jQuery UI提供的独立组件，不属于原生jQuery的API。另外现有代码未实现输入框和滑块的双向绑定逻辑，因此输入数值后滑块不会同步更新。

实现效果 #

调整后的代码支持两种交互逻辑：

• 拖动滑块自动同步输入框、价格显示文本、隐藏域的值
• 在输入框填写合法数值后自动同步滑块位置，自动校验数值范围（最低价不得高于最高价、不得超出100-50000的区间限制）

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 引入jQuery UI CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.css">
    <style>
        /* 自定义样式，优化显示效果，可根据需求调整 */
        #price_range {
            margin: 20px 10px;
        }
        .price-input-group {
            display: flex;
            gap: 10px;
            align-items: center;
            margin: 10px 0;
        }
        .price-input-group input {
            width: 100px;
            padding: 4px;
        }
        .slide-labels {
            position: relative;
            height: 20px;
            margin: 0 10px;
        }
        .slide-labels .label {
            position: absolute;
            font-size: 12px;
            color: #666;
        }
        .tic {
            position: absolute;
            width: 1px;
            height: 100%;
            background: #ccc;
        }
        .pos-1 { left: 20%; }
        .pos-2 { left: 40%; }
        .pos-3 { left: 60%; }
        .pos-4 { left: 80%; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入jQuery UI JS，必须在jQuery之后加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<div class="list-group three-list">
  <h3>价格区间</h3>
  <div class="price-input-group">
    <span>最低价：</span>
    <input id="min_price" type="number" value="100" min="100" max="50000" />
    <span>最高价：</span>
    <input id="max_price" type="number" value="50000" min="100" max="50000" />
  </div>
  <!-- 保留原有隐藏域用于表单提交 -->
  <input id="hidden_minimum_price" type="hidden" value="100" />
  <input id="hidden_maximum_price" type="hidden" value="50000" />
  <p id="price_show">100 - 50000</p>
  <div class="slide-labels">
    <div class="label pos-0 first" style="left: 0;">
      $0
    </div>
    <div class="label pos-1">
      $10,000
    </div>
    <div class="label pos-2">
      $20,000
    </div>
    <div class="label pos-3">
      $30,000
    </div>
    <div class="label pos-4">
      $40,000
    </div>
    <div class="label pos-5 last" style="right: 0;">
      $50,000
    </div>
  </div>
  <div id="price_range">
    <div class="tic pos-1">
    </div>
    <div class="tic pos-2">
    </div>
    <div class="tic pos-3">
    </div>
    <div class="tic pos-4">
    </div>
  </div>
</div>

<script>
// 初始化滑块
$('#price_range').slider({
  range: true,
  min: 100,
  max: 50000,
  values: [100, 50000],
  step: 1,
  // 滑动过程中实时同步数值
  slide: function(event, ui) {
    updatePriceDisplay(ui.values[0], ui.values[1]);
  },
  stop: function(event, ui) {
    filter_data();
  }
});

// 刻度标签定位逻辑
$("#price_range .tic").each(function(ind, elem) {
  var c = $(elem).attr("class").split(" ");
  var i = c.indexOf("tic");
  c.splice(i, 1);
  var pos = c.join("");
  $(".slide-labels ." + pos).position({
    my: "center bottom",
    at: "right-5 top-4 ",
    of: $(elem)
  });
});

// 统一更新价格显示、输入框、隐藏域的公共方法
function updatePriceDisplay(min, max) {
  $('#price_show').html(min + ' - ' + max);
  $('#min_price').val(min);
  $('#max_price').val(max);
  $('#hidden_minimum_price').val(min);
  $('#hidden_maximum_price').val(max);
}

// 绑定最低价输入框同步事件
$('#min_price').on('input change', function() {
  let minVal = parseInt($(this).val()) || 100;
  let maxVal = parseInt($('#max_price').val()) || 50000;
  // 数值合法性校验
  if (minVal < 100) minVal = 100;
  if (minVal > maxVal) minVal = maxVal;
  // 更新滑块位置
  $('#price_range').slider('values', 0, minVal);
  updatePriceDisplay(minVal, maxVal);
});

// 绑定最高价输入框同步事件
$('#max_price').on('input change', function() {
  let maxVal = parseInt($(this).val()) || 50000;
  let minVal = parseInt($('#min_price').val()) || 100;
  // 数值合法性校验
  if (maxVal > 50000) maxVal = 50000;
  if (maxVal < minVal) maxVal = minVal;
  // 更新滑块位置
  $('#price_range').slider('values', 1, maxVal);
  updatePriceDisplay(minVal, maxVal);
});

// 替换为你的业务筛选逻辑
function filter_data() {
  // 业务代码写在这里
}
</script>
</body>
</html>

注意事项 #

如果项目中存在多版本jQuery冲突的情况，可使用jQuery.noConflict()处理冲突，确保调用slider方法的jQuery实例是已加载jQuery UI的版本即可。

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