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

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 输入的属性。用于确定要使用滑块上的哪个手柄。&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; <input type="text" index="0" id="range" class="input_slides">&nbsp; &nbsp; &nbsp; <input type="text" index="1" id="range-1" class="input_slides">&nbsp; &nbsp; </form>将更改值更新为新的索引属性&nbsp; $(".input_slides").change(function() {&nbsp; &nbsp; var $this = $(this);&nbsp; &nbsp; $(".price_range").slider("values", $this.attr('index'), $this.val());&nbsp; &nbsp; });这将解决直接问题。这是小提琴： https: //jsfiddle.net/eczh8ymk/