Блог

Главная - Вопросы по программированию - как изменить слайдер по полям ввода?

как изменить слайдер по полям ввода?

#javascript #jquery #rangeslider

#javascript #jquery ( jquery ) #дальнобойщик

Вопрос:

JAVASCRIPT У меня есть этот ползунок диапазона jQuery с js-кодом, я хочу изменить ползунок, когда я помещаю число в поля ввода, также указан jsfiddle: https://jsfiddle.net/akhlaque/6Lrtpjwk/1 /

 var details = {
"books": 20,
"pens": 60,
"ink": 90,
"table": 120,
"chair": 170,
"shoes": 220,
"boots": 320,

};

$(документ).готово(функция() {

   $(".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 amp;amp; details[item] <= maximum) {
          result  = "<tr><td>"   item   "</td><td>"   details[item]   "</td></tr>";
      }
  }
  result  = "</table>";
  $(".output").html(result);

}

$(документ).готово(функция(){

$(«.input_slides»).изменить(функция(){

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

});
})

 enter code here

Ответ №1:

Я внес две модификации.

  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>
  1. Обновлено значение изменения до нового индекса attr
   $(".input_slides").change(function() {
    var $this = $(this);
    $(".price_range").slider("values", $this.attr('index'), $this.val());
    });

Это решит прямую проблему.

Вот скрипка: https://jsfiddle.net/eczh8ymk /