Jquery UI Slider modifier la valeur d'un curseur lors de changé dans le champ de saisie

JS:

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

HTML:

<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" />

Heres un js fiddle

im essayant d'obtenir le curseur pour passer à la position correcte lorsque je change la valeur dans le champ de saisie.
Iam à l'aide de la Jquery UI slider.

InformationsquelleAutor oBo | 2012-10-09
  1. 19

    Vous joindre à la change événement de votre entrée comme suit:

    $("#storlek_testet").change(function() {
    $("#storlekslider").slider("value", $(this).val());
});
    • $(this).val() peut être utilisé à la place du sélecteur $("storlek_testet").val()
    • il est également # et ); manquantes 😉
    • Merci, je l'ai mis à jour...
    InformationsquelleAutor Constantinius
  2. 5
    $("#storlek_testet").keyup(function() {
    $("#storlekslider").slider("value" , $(this).val())
});

    http://jsfiddle.net/C8X4D/

    • comment mettre en œuvre pour wordpress plugin panneau d'options
    • change() est préférable de keyup() si input est de type number, parce que keyup() de ne pas appliquer les modifications lorsque le champ boutons haut/bas permettent de modifier la valeur d'entrée.
    InformationsquelleAutor Ch4rAss
  3. 5

    Modifier les valeurs à partir de plusieurs entrées:

    $("#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/

    • Cela fonctionne bien si vous avez un curseur de plage
    InformationsquelleAutor Human