Question

我有这个使用jQuery范围（滑块）的代码，并在两个文本框中返回范围的起始值和限制值。这个功能很好。

 function sliderRange () {
    var player = document.getElementById("audio-player");
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: player.duration,
        values: [0, player.duration],
        slide: function (event, ui) {
            $("#slider-value1").val(ui.values[0]);
            $("#slider-value2").val(ui.values[1]);
        }
    });
    $("#slider-value1").val($("#slider-range").slider("values", 0));

    $("#slider-value2").val($("#slider-range").slider("values", 1));

我有这个功能，给定文本框中的输入，更改滑块位置：

$("input.slider-value").change(function () {
    var $this = $(this);
    $("#slider-range").slider("values", $this.data("index"), $this.val());
});

我的问题是，即使它将滑块位置更改为新值，它也不会更新值，因此我的其他函数会忽略新范围，仍然使用旧的或初始值来获取数据。有谁知道如何处理这个？

Answer 1

一般来说，您的代码看起来不错，您可能忘记使用输入字段定义data-index属性，这些字段用于在输入字段时更改value1或value2已更改（change）。

我提供了一个类似的例子，我希望能帮到你：

＆＃13;

function sliderRange() {
  $('#slider').slider({
    range: true,
    min: 0,
    max: 10,
    values: [
      0,
      10
    ],
    slide: function (event, ui) {
      $('#slider-value1').val(ui.values[0]);
      $('#slider-value2').val(ui.values[1]);
    }
  });
  $('#slider-value1').val($('#slider').slider('values', 0));
  $('#slider-value2').val($('#slider').slider('values', 1));
}

sliderRange();

$('input.slider-value').change(function () {
  var $this = $(this);
  $('#slider').slider('values', $this.data('index'), $this.val());
});

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="slider"></div>
<input type="text" id="slider-value1" class="slider-value" data-index="0"/>
<input type="text" id="slider-value2" class="slider-value" data-index="1"/>

</body>
</html>

＆＃13;

外部值更改时的jQuery滑块

1 个答案: