2016-10-17 6 views
0

Ich versuche, jquery-ui-slider zu implementieren.Ich habe ein Textfeld und und update button ... immer wenn der Benutzer auf die Schaltfläche Aktualisieren, den Schieberegler Daumen klickt bewegt sich an die in der Textbox angegebene Position.Wenn dies geschieht, hört der Schieberegler auf zu gleiten. Warum passiert dies? Wie löst man das? Mein aktueller Code ist:Jquery Slider stoppt beim Aktualisieren der Slider-Position auf Knopfdruck

<!DOCTYPE html> 
    <html> 
    <head> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <style type="text/css"> 
     #slider { margin: 20px; } 
     </style> 
     <script> 
      $(document).ready(function() { 
       $("#slider").slider(
       { 
        min: 0, 
        max: 100, 
        step: 1, 
        slide: showValue 
       }); 
       $("#update").click(function() { 
        $("#slider").slider("option", "values", $("#seekTo").val()); 

       }); 
       function showValue(event, ui) { 
        $("#val").html(ui.value); 
       } 
      }); 
     </script> 
    </head> 
    <body> 

    <div id="slider"></div> 
    Seek To : <input id="seekTo" type="text" value="10" /> 
    <input id="update" type="button" value="Update" /> 
    Current Value : <span id="val">0</span> 
    </body> 
    </html> 

Antwort

1

Sie sollten die value und nicht die values gesetzt:

$("#slider").slider("option", "value", $("#seekTo").val()); 

Hier ist ein funktionierendes Beispiel:

$(document).ready(function() { 
 
    $("#slider").slider(
 
    { 
 
     min: 0, 
 
     max: 100, 
 
     step: 1, 
 
     slide: showValue 
 
    }); 
 
    $("#update").click(function() { 
 
    $("#slider").slider("option", "value", $("#seekTo").val()); 
 

 
    }); 
 
    function showValue(event, ui) { 
 
    $("#val").html(ui.value); 
 
    } 
 
});
 #slider { margin: 20px; }
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 

 
<div id="slider"></div> 
 
Seek To : <input id="seekTo" type="text" value="10" /> 
 
<input id="update" type="button" value="Update" /> 
 
Current Value : <span id="val">0</span>