2012-10-09 36 views
14

jQuery UI deslizante valor de cambio de control deslizante cuando se cambió en el campo de entrada

$("#storlekslider").slider({ 
 
    range: "max", 
 
    min: 0, 
 
    max: 1500, 
 
    value: 0, 
 
    slide: function(event, ui) { 
 
    $("#storlek_testet").val(ui.value); 
 
    $(ui.value).val($('#storlek_testet').val()); 
 
    } 
 
}); 
 
// $("#storlek_testet").val($("#storlekslider").slider("value")); 
 

 
$("#storlek_testet").change(function() { 
 
    $("#storlekslider").slider("value", $(this).val()); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css"> 
 
<div id="storlekslider"></div> 
 
<input type="text" name="storlek" id="storlek_testet" value="500" />

Heresa js fiddle

im tratando de obtener el control deslizante para saltar a la posición correcta cuando cambie el valor en el campo de entrada. Iam usando el Jquery UI slider.

Respuesta

19

se adjunta a la change caso de su entrada, así:

$("#storlek_testet").change(function() { 
    $("#storlekslider").slider("value", $(this).val()); 
}); 
+0

$ (this) .val() se puede utilizar en lugar del selector $ ("storlek_testet"). Val() –

+0

también hay '#' y ');' missing ;-) – Ch4rAss

+0

Gracias, lo he actualizado ... – Constantinius

5
$("#storlek_testet").keyup(function() { 
    $("#storlekslider").slider("value" , $(this).val()) 
}); 

http://jsfiddle.net/C8X4D/

+0

cómo implementarlo para el panel de opciones del plugin de wordpress – Firefog

4

Cambiar los valores de varias entradas:

$("#input-1").change(function() { 
    $("#slider").slider('values',0,$(this).val()); 
}); 
$("#input-2").change(function() { 
    $("#slider").slider('values',1,$(this).val()); 
}); 

https://jsfiddle.net/brhuman/uvx6pdc1/

+0

Esto funciona bien si tiene un deslizador de rango – garrettendi

Cuestiones relacionadas