如何让用户更改 jQuery UI 滑块的选项？

Question

我的页面上有一个 jQuery UI 滑块。开头是：

$( "#slider" ).slider({
    value: 6,
    min: 6,
    max: 120,
    step: 6
});

效果很好。

我旁边有一个选择元素，其中有 6、12 和 24 作为选项。 我想要完成的是让用户选择 12，滑块的步长、最小值和值都变为 12（24 相同）。我已经尝试构建一个函数：

$('#dropdown').change(function(){
    $( "#slider" ).slider( "option", "value", $(this).val() );
    $( "#slider" ).slider( "option", "min", $(this).val() );
    $( "#slider" ).slider( "option", "step", $(this).val() );
    $( "#slider" ).slider( "option", "max", 120 );
});

然而，这只是将值设为 12，然后在单击滑块时，它会一直跳到末尾 (120) 并停留在那里。

我是否需要销毁滑块并从头开始重新制作？

编辑 #1：

我刚刚下载了 Firebug 并使用控制台检查了滑块，所有值都返回正确（min=12,value=12,step=12,max=120）。有谁知道它为什么这么固执，跳/坚持到底？

Answer 1

发现问题。 您需要将 <select> 中的值解析为 int，然后才能使用它来更改滑块的选项。

$('#dropdown').change(function()
{
    var currentVal =  parseInt($("#slider").slider("value"));
    var newOptions = parseInt($(this).val());
    $( "#slider" ).slider( "value", currentVal);
    $( "#slider" ).slider( "option", "min", newOptions );
    $( "#slider" ).slider( "option", "step", newOptions );
    $( "#slider" ).slider( "option", "max", 120 );
});

工作示例

http://jsfiddle.net/DigitalBiscuits/VSBCT/1/

Answer 2

实现是正确的。但是你可以缓存结果

$('#dropdown').change(function(){
    var val = this.value;
    $( "#slider" ).slider( "option", "value", val );
    $( "#slider" ).slider( "option", "min", val );
    $( "#slider" ).slider( "option", "step", val );
    $( "#slider" ).slidYou can er( "option", "max", 120 );
});