Establecer un límite para el valor mínimo para el control deslizante jQuery UI

Question

Tengo un control deslizante que va de 0 a 80. Quiero agregar un rango mínimo, por lo que los usuarios no pueden deslizar más bajo que eso. por ejemplo, quiero establecer un valor como 20, y los usuarios no pueden corredera inferior a este, pero el rango del deslizador sigue siendo de 0 a 80.

Aquí está mi script de Slider:

$("#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); 
    } 
}); 

Si puedes, por favor guíame por detalles.

Answer 1

En la función slide, puede verificar el valor del control deslizante para ver si está dentro del rango que desea.

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

Esto es para mantener el mínimo en 0, pero ahora permitir que los valores por debajo de 20, que es lo que pienso de Siwa está pidiendo. Si simplemente desea hacer un mínimo de 20, cambie min: 0 a min: 20.

This podría ser útil.

Answer 2

Cambie la propiedad max en su código a 20. Example.

Pero si desea mostrar 100 valores enteros y permitir que el usuario se deslice solo entre 0 y 20, debe vincular a change evento su método, que devolvería la posición de diapositiva a permitido, una vez que el usuario intenta ignorarlo. Doc page.

Answer 3

He encontrado que el siguiente método de deslizamiento fija el valor inferior a 20 cuando se trata de deslizar más allá de 20, en lugar de mantener el valor anterior (un número ligeramente superior a 20).

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