如何通过按钮同步更新jQuery-UI滑块手柄的文本值？

问题核心：通过jQuery API调用slider("value", xxx)设置滑块值时，只会触发滑块的change事件，但你当前仅给滑块绑定了slide事件（仅拖动滑块时触发），因此手柄文本不会自动更新。

以下是两种可行解决方案：

方法1：复用函数+绑定change事件（推荐） #

这种方式代码复用性强，适合多按钮场景：

1. 先定义通用更新函数，统一处理输入框和手柄文本的更新：

function updateSlider(sliderSelector, inputSelector, value) {
  // 更新隐藏输入框的值
  $(inputSelector).val(value);
  // 更新滑块手柄的文本
  $(sliderSelector).find(".ui-slider-handle").text(value);
}

2. 修改滑块初始化代码，同时绑定slide和change事件，复用上述函数：

// 左侧电机滑块
$("#lspeed").slider({
  orientation: "vertical",
  min: -150,
  max: 150,
  value: 0,
  slide: function(event, ui) {
    updateSlider("#lspeed", "#lspeedv", ui.value);
    create_post();
  },
  change: function(event, ui) {
    updateSlider("#lspeed", "#lspeedv", ui.value);
    create_post();
  }
});

// 右侧电机滑块
$("#rspeed").slider({
  orientation: "vertical",
  min: -150,
  max: 150,
  value: 0,
  slide: function(event, ui) {
    updateSlider("#rspeed", "#rspeedv", ui.value);
    create_post();
  },
  change: function(event, ui) {
    updateSlider("#rspeed", "#rspeedv", ui.value);
    create_post();
  }
});

3. 按钮点击代码无需修改，调用slider("value", xxx)时会自动触发change事件，进而执行更新逻辑。

方法2：按钮点击时手动更新手柄文本 #

如果场景简单，也可以直接在按钮点击后手动修改手柄文本：

$("#tright").button({
  classes: {
    "ui-button": "custom-blue"
  }
}).click(function () {
  const leftSpeed = "40";
  const rightSpeed = "20";

  $("#lspeedv").val(leftSpeed);
  $("#lspeed").slider("value", leftSpeed);
  // 手动更新左侧手柄文本
  $("#lspeed .ui-slider-handle").text(leftSpeed);

  $("#rspeedv").val(rightSpeed);
  $("#rspeed").slider("value", rightSpeed);
  // 手动更新右侧手柄文本
  $("#rspeed .ui-slider-handle").text(rightSpeed);

  create_post();
});

这种方式更直接，但如果存在多个控制按钮，会产生较多重复代码。

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