Jquery 滑块在单击按钮时更新滑块位置时停止滑动

Question

我正在尝试实现 jquery-ui-slider.I 有一个文本框和更新按钮...每当用户点击更新按钮时，滑块拇指移动到 textbox.However 中指定的位置，执行此操作后滑块拇指停止滑动。为什么会这样？如何解决这个问题？我当前的代码是：

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

Answer 1

您应该设置 value 而不是 values:

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

这是一个工作示例：

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

Jquery 滑块在单击按钮时更新滑块位置时停止滑动

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

javascript

jquery

html

jquery-ui

jquery-ui-slider