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

【问题标题】：Jquery slider stops sliding on updating the slider position on button clickJquery滑块在按钮单击时更新滑块位置时停止滑动
【发布时间】：2017-02-26 20:50:52
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-slider

【解决方案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>

【讨论】：