如何通过输入字段更改滑块？

Question

JAVASCRIPT 我有这个带有 js 代码的 jQuery 范围滑块，我想在将数字放入输入字段时更改滑块，还给出了 jsfiddle：https: //jsfiddle.net/akhlaque/6Lrtpjwk/1/var details = {"books": 20,"pens": 60,"ink": 90,"table": 120,"chair": 170,"shoes": 220,"boots": 320,};$(文档).ready(函数() {  $(".price_range").slider({      max: 500,      range: true,      values: [0, 500],      change: function(event, ui) {          getDetails(ui.values[0], ui.values[1]);      }  });  var current = $(".price_range").slider("option", "values");  getDetails(current[0], current[1]);});函数 getDetails(最小值, 最大值) {  $("#range").val("" + minimum);  $("#range-1").val("" + maximum);  var result = "<table><tr><th>Product Name</th>  <th>Price (in $)</th></tr>";  for (var item in details) {      if (details[item] >= minimum && details[item] <= maximum) {          result += "<tr><td>" + item + "</td><td>" + details[item] + "</td></tr>";      }  }  result += "</table>";  $(".output").html(result);}$(文档).ready(函数(){$(".input_slides").change(function(){var $this = $(this);$(".price_range").slider("values", $this.data("index"), $this.val());}); })enter code here

Answer 1

我做了两处修改。

添加“index”作为 HTML 输入的属性。用于确定要使用滑块上的哪个手柄。

    <form>

      <input type="text" index="0" id="range" class="input_slides">

      <input type="text" index="1" id="range-1" class="input_slides">

    </form>

将更改值更新为新的索引属性

  $(".input_slides").change(function() {

    var $this = $(this);

    $(".price_range").slider("values", $this.attr('index'), $this.val());

    });

这将解决直接问题。

这是小提琴： https: //jsfiddle.net/eczh8ymk/