設定值和更改事件

滑塊提供了一個名為 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 事件將是必要的。