設置jQuery UI滑塊的最小值限制

我有一個範圍從0到80的滑塊。我想添加一個最小範圍，所以用戶不能滑動到低於此值。比如我想設置像20的數值，並且用戶無法滑塊比這個低，但滑塊的範圍仍然是從0到80設置jQuery UI滑塊的最小值限制

這裏是我的滑塊腳本：

$("#showslider").keyup(function (e){ 
$(".slider").slider("value", $("#showslider").val()); 
$("#slider-result").html($("#showslider").val()); 
$(".slider").slider({ 
animate: true, 
    range: "min", 
    value: 50, 
    min: 0, 
max: 80, 
step: 1, 
slide: function (event, ui) { 
$("#slider-result").html(ui.value); 
    $("#showslider").val(ui.value); 
}, 
change: function(event, ui) { 
    $('#hidden').attr('value', ui.value); 
    } 
});

如果你能請詳細指導我。

來源

2012-06-06 Siwa

你能否詳細說明當不允許任何「<20」的情況下，滑塊的值在'0 - 80'範圍內？ – pimvdb

這是用戶級別，所以他們可以升級他們的級別，但不能降級。我希望他們看到所有可用的級別。 – Siwa

在slide函數中，您可以檢查滑塊的值以查看它是否在您想要的範圍內。

if (ui.value < 20) // corrected 
    return false;

這是爲了保持最小值爲0，但現在允許值低於20，這正是我認爲Siwa所要求的值。如果您只想製作至少20個，請將min: 0更改爲min: 20。

This可能會有用。

來源

2012-06-06 15:14:33 sachleen

將代碼中的max屬性更改爲20. Example。

但是，如果要顯示整個100個值並允許用戶僅在0到20之間滑動，則應該綁定到change事件您的方法，一旦用戶嘗試忽略它，whick會將滑動位置返回到允許的位置。 Doc page。

來源

2012-06-06 15:11:51

我發現下面的幻燈片方法會在您嘗試滑動過20時將較低值固定爲20，而不是保留以前的值（某些數字略高於20）。

slide: function (event, ui) { 
    if (ui.value < 20) { 
    $(this).slider('value',20); 
    return false; 
    } 
},

來源

2015-08-01 19:15:17

設置jQuery UI滑塊的最小值限制

回答

相關問題