JQuery UI Slider联动及对应值显示需求技术问询

你已经实现了滑块同步功能，现在只需调整代码逻辑，就能让每个滑块旁同步显示当前值：

修改后的完整代码 #

HTML部分

<div id="slider-1"></div>
<div id="amount">当前值：1</div>
<div id="slider-2"></div>
<div id="amount2">当前值：1</div>

JavaScript部分

// 统一初始化两个滑块，配置参数复用
const sliders = ['#slider-1', '#slider-2'].map(selector => 
  $(selector).slider({
    min: 1,
    max: 10,
    step: 1,
    value: 1, // 设置初始值为1
    slide: function(_, { value }) {
      // 同步两个滑块的数值
      sliders.forEach($slider => $slider.slider('value', value));
      // 同时更新两个显示容器的内容
      $('#amount').text(`当前值：${value}`);
      $('#amount2').text(`当前值：${value}`);
    }
  })
);

// 页面加载完成后确保初始值正常显示
$(document).ready(function() {
  const initialVal = sliders[0].slider('value');
  $('#amount').text(`当前值：${initialVal}`);
  $('#amount2').text(`当前值：${initialVal}`);
});

关键调整说明 #

• 合并滑块初始化逻辑，避免重复调用slider()方法覆盖原有配置
• 在slide事件回调中同时更新两个值显示容器，保证数值同步
• 替换原代码中的.val()为.text()，因为amount系列是普通div容器，并非表单输入控件
• 增加页面初始化时的数值显示逻辑，确保打开页面就能看到初始值

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