设置值和更改事件

滑块提供了一个名为 change 的事件，该事件将在鼠标完成滑块手柄拖动或者以编程方式更改值后触发。此函数包含对幻灯片 event 的引用和对滑块 ui 对象的引用。ui 对象包含要移动的句柄的 jQuery 对象和滑块的值。

一个例子可能是在滑块的值被另一个元素的事件更新后必须显示新信息。让我们使用 select 元素进行演示，当 select 的值发生变化时，以编程方式设置滑块的值：

HTML

<select id="setting">
  <option value="1">Low</option>
  <option value="2">Medium</option>
  <option value="3">High</option>
</select>

<div id="slider"></div>

<div id="display-value"></div>

JavaScript

$(function() {
  $( "#slider" ).slider({
    min: 0,
    max: 11,
    // This will trigger when the value is programmatically changed
    change: function(event, ui) {
        $( "#display-value" ).text(ui.value);
    }
  });
  
  $( "#setting" ).change(function () {
    switch ($(this).val()) {
      case "1":
        $( "#slider" ).slider( "value", 3 );  // Sets the value of a slider programmatically
        break;
      case "2":
        $( "#slider" ).slider( "value", 7 );  // Sets the value of a slider programmatically
        break;
      case "3":
        $( "#slider" ).slider( "value", 11 ); // Sets the value of a slider programmatically
        break;
    }
  });
});

注意： 在这些情况下，slide 事件不会触发，并且需要 change 事件。但是，如果元素需要响应滑块值而在拖动手柄时发生变化，则 slide 事件将是必要的。