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

【问题标题】：how to change slider by input fields?如何通过输入字段更改滑块？
【发布时间】：2020-12-10 15:28:40
【问题描述】：

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,

};

$(document).ready(function() {

  $(".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]);

});

function 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);

}

$(document).ready(function(){

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

var $this = $(this);
$(".price_range").slider("values", $this.data("index"), $this.val());

}); })

enter code here

【问题讨论】：

标签： javascript jquery rangeslider

【解决方案1】：

我做了两个修改。

添加了“索引”作为 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/

【讨论】：