jQuery UI Library 设置值和变更事件

示例

滑块提供了一个称为的事件change，该事件将在鼠标完成滑块手柄拖动或value(s)通过编程方式更改后触发。此功能保存对幻灯片event的引用和对滑块ui对象的引用。该ui对象为要移动的手柄和value(s)滑块的持有一个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,
    // 以编程方式更改值时将触发
    change: function(event, ui) {
        $( "#display-value" ).text(ui.value);
    }
  });
  
  $( "#setting" ).change(function () {
    switch ($(this).val()) {
      case "1":
        $( "#slider" ).slider( "value", 3 );  // 以编程方式设置滑块的值
        break;
      case "2":
        $( "#slider" ).slider( "value", 7 );  // 以编程方式设置滑块的值
        break;
      case "3":
        $( "#slider" ).slider( "value", 11 ); // 以编程方式设置滑块的值
        break;
    }
  });
});

注意：在这种情况下，slide事件不会触发，因此change需要该事件。但是，如果元素需要对拖动手柄时更改的滑块值做出反应，则将需要该slide事件。