設置多個滑塊值和鏈接的文本字段

我有三個按鈕，它們應該設置一組滑塊的值和滑塊值輸出的文本區域。該功能只會改變其中一個滑塊。設置多個滑塊值和鏈接的文本字段

//slider 
$("#slider-design").slider({ 
    range: "min", 
    value: 2, 
    min: 1, 
    max: 5, 
    slide: function (event, ui) { 
     $("#amount-design").val(ui.value); 
    } 
}); 
$("#amount-design").val($("#slider-design").slider("value")); 

$("#slider-pages").slider({ 
    range: "min", 
    value: 5, 
    min: 1, 
    max: 10, 
    slide: function (event, ui) { 
     $("#amount-pages").val(ui.value); 
    } 
}); 
$("#amount-pages").val($("#slider-pages").slider("value")); 

$("#slider-hours").slider({ 
    range: "min", 
    value: 5, 
    min: 0, 
    max: 10, 
    slide: function (event, ui) { 
     $("#amount-hours").val(ui.value); 
    } 
}); 
$("#amount-hours").val($("#slider-hours").slider("value")); 

$("#preset-small").click(function() { 
    $("#slider-pages").slider("value", 5); 
    $("#slider-design").slider("value", 1); 
    $("#slider-hours").slider("value", 5); 
});

來源

2013-07-10 Joseph

我看不出有什麼問題。所有3個滑塊工作正常 –

要回顯DKM，滑塊工作正常。可能會把你扔掉的是第一個/最後一個設置爲5，這與它們的起始值相同。 – boz

的原因是因爲slide事件不由值/選項方法所觸發，但只有當你用滑塊本身交互。

文件：http://wiki.jqueryui.com/w/page/12138059/Slider#specs

您可以使用change事件改變它，這是觸發值/選項設置得。

代碼：

//slider 
$("#slider-design").slider({ 
    range: "min", 
    value: 2, 
    min: 1, 
    max: 5, 
    change: function (event, ui) { 
     $("#amount-design").val(ui.value); 
    } 
}); 
$("#amount-design").val($("#slider-design").slider("value")); 

$("#slider-pages").slider({ 
    range: "min", 
    value: 5, 
    min: 1, 
    max: 10, 
    change: function (event, ui) { 
     $("#amount-pages").val(ui.value); 
    } 
}); 
$("#amount-pages").val($("#slider-pages").slider("value")); 

$("#slider-hours").slider({ 
    range: "min", 
    value: 5, 
    min: 0, 
    max: 10, 
    change: function (event, ui) { 
     $("#amount-hours").val(ui.value); 
    } 
}); 
$("#amount-hours").val($("#slider-hours").slider("value"));

工作小提琴：http://jsfiddle.net/anb9G/1/

來源

2013-07-10 16:45:45

設置多個滑塊值和鏈接的文本字段

回答

相關問題