jquery中滑块的值

Question

我希望从输入字段中获取值，以便对滑块进行更改。

    <div id="gobutton">
        <div class="ui search input">
            <input type="text" id="start">
            <input type="text" id="maxend>
        </div>
        <div class="ui btn-container">
            <div id="range-slider"></div>
            <a class="item" href="">Go</a>
        </div>
    </div>

​

$(function() {
  $("#slider-3").slider({
    range: true,
    min: 0,
    max: 500,
    values: [35, 200],
    slide: function(event, ui) {
      $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $('#gobutton a').prop('href', '?start=' + ui.values[0] + "&end=" + ui.values[1];
    }
  });
  $("#price").val("$" + $("#slider-3").slider("values", 0) +
    " - $" + $("#slider-3").slider("values", 1));
});

<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- HTML -->
<p>
  <label for="price">Price range:</label>
  <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>

​

与此相同，只有当我滑动滑块时，值才会发生变化。如何通过键入文本字段来更改滑块的值。

此外，链接(#gobutton)也应该工作。

来源：http://tutorialspoint.com/jqueryui/jqueryui_slider.htm

Answer 1

您可以使用$("#slider-3").slider("values", [$("#start").val(), $("#end").val()]);和$("#slider-3").slider("values") & $("#slider-3").slider("values", [$("#start").val(), $("#end").val()]);获取和设置值。

正如您已经提到的，您希望在更改input时更改滑块，因此，例如，我使用了两个input的start & end。在这些输入上绑定change事件并更新slider。

slider将values作为array，因此我们需要提供值的array来更新它。使用[$("#start").val(), $("#end").val()]作为开始值和结束值数组。

使用$("#slider-3").data("ui-slider")._slide();，这将触发幻灯片事件，这样价格也可以更新。

检查下面的代码。

​

$(function() {
  $("#slider-3").slider({
    range: true,
    min: 0,
    max: 500,
    values: [35, 200],
    slide: function(event, ui) {
      $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $('#gobutton a').prop('href', '?start=' + ui.values[0] + "&end=" + ui.values[1]);
    }
  });
  $("#price").val("$" + $("#slider-3").slider("values", 0) +
    " - $" + $("#slider-3").slider("values", 1));
});

$("#start, #maxend").change(function() {
  $("#slider-3").slider("values", [$("#start").val(), $("#maxend").val()]);
  // below line will trigger slide event so price can also update.
  // $("#slider-3").data("slider")._slide(); // for old versions
  $("#slider-3").data("ui-slider")._slide(); // for new versions
});

<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="price">Price range:</label>
  <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>

<div>
  <div id="gobutton">
    <div class="ui search input">
      <input type="text" id="start" value="35" />
      <input type="text" id="maxend" value="200" />
    </div>
    <div class=" ui btn-container ">
      <div id="range-slider "></div>
      <a class="item " href=" ">Go</a>
    </div>
  </div>

​