jQuery UI Slider value() 方法

jQuery UI Slider 是一个用户界面组件，允许用户通过滑块滑动来选择值。 它提供了诸如拖动、步进、滑块方向等选项，并可以与其他 jQuery UI 组件无缝集成。

value() 方法

value() 方法是 jQuery UI Slider 提供的 API 方法之一，它用于获取或设置滑块的值。可以通过以下语法调用它：

// 获取滑块的当前值
$( ".selector" ).slider( "value" );

// 设置滑块的值
$( ".selector" ).slider( "value", newValue );

其中，".selector" 是 jQuery 选择器，用于指定要应用 Slider 的元素，newValue 是要设置的新值。

示例

下面是一个简单的示例，说明如何使用 value() 方法获取或设置 Slider 的值：

HTML 代码：

<div id="slider"></div>
<div id="output">当前值：0</div>

JavaScript 代码：

$( "#slider" ).slider({
  // 默认值为0
  value: 0,
  
  // 滑块值变化时，更新输出
  slide: function( event, ui ) {
    $( "#output" ).html("当前值：" + ui.value);
  }
});

// 获取滑块的当前值
var currentValue = $( "#slider" ).slider( "value" );

// 设置滑块的值为 50
$( "#slider" ).slider( "value", 50 );

运行结果：当拖动滑块时，在输出的 div 元素中显示当前值，同时还可以使用 value() 方法获取或设置该值。

注意事项

• 如果需要获取所有 Slider 元素的值，可以使用 each() 方法遍历所有元素，然后使用 value() 方法获取每个 Slider 元素的值。
• 如果 Slider 的 range 选项设置为 true，则返回的是一个包含两个值的数组，分别表示范围选择的最小值和最大值；但是在设置值时需传入一个对象，格式为 { min: newValue1, max: newValue2 }。
• 如果需要在 value() 方法设置值后执行一些操作，可以通过对比旧值和新值来实现，例如：

var oldValue = $( "#slider" ).slider( "value" );
$( "#slider" ).slider( "value", 50 );
var newValue = $( "#slider" ).slider( "value" );

if (oldValue !== newValue) {
  // 执行一些操作
}

参考文献

• jQuery UI Slider
• Slider value() Method