工作示例

Question

我的页面上有一个jQuery UI滑块。它始于：

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

哪种方法正常。

我旁边有一个select元素，有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 );
});

然而，所有这一切都是make是转到值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 );
});

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

2 个答案:

工作示例