Search code examples
javascriptjqueryhtmljquery-uijquery-ui-slider

Jquery slider stops sliding on updating the slider position on button click

I am trying to implement jquery-ui-slider.I have a text box and and update button...whenever the user clicks on the update button,the slider thumb moves to the position specified in the textbox.However,after doing this the slider thumb stops sliding. Why is this happening? How to solve this? My current code is : 

  <!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>
Solution

  • You should set the value and not the values:

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

    Here is a working example:

    $(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>