javascript - 如何获得 jquery slider 反馈？

Question

如何设置反馈，以便在输入数字时 slider 的值发生变化？

JS:

$('.catalog-filter-change-price_slider-range').slider({
  range: true,
  min: priceMin,
  max: priceMax,
  values: [priceCurMin, priceCurMax],
  slide: function (event, ui) {
    setSliderValues(ui.values[0], ui.values[1]);
  },
  stop: function (event, ui) {
    self.getNewFilterData();
  }
});

HTML:

<div id="mse2_ms|price" class="catalog_filter catalog-filter_price fieldset">
<div class="catalog-filter_title">Price</div>
<div class="catalog-filter_change">
    <div class="mse2_number_inputs catalog-filter-change-price_slider-inputs">
        <input type="input" name="price__gte" id="price_0" value="{{ prices.price__min }}"
            class="form-control input-sm" />
        <input type="input" name="price__lte" id="price_1" value="{{ prices.price__max }}"
            class="form-control input-sm" />
    </div>
    <div class="mse2_number_slider catalog-filter-change-price_slider-range"></div>
</div>

示例:https://codepen.io/dimaZubkov/pen/KgBqdA

Answer 1

这个的基础是这样的:

$(".catalog-filter_change input").change(function() {
  var p0 = $("#price_0").val();
  var p1 = $("#price_1").val();
  $('.catalog-filter-change-price_slider-range').slider("option", "values", [p0, p1]);
});

在这里查看更多信息:http://api.jqueryui.com/slider/#method-values

基于您提供的内容的更完整示例:

$(function() {
  var priceMin = 1,
    priceMax = 5,
    priceCurMin = 1,
    priceCurMax = 5;

  function setSliderValues(l, h) {}

  $('.catalog-filter-change-price_slider-range').slider({
    range: true,
    min: priceMin,
    max: priceMax,
    values: [priceCurMin, priceCurMax],
    slide: function(event, ui) {
      setSliderValues(ui.values[0], ui.values[1]);
    },
    stop: function(event, ui) {
      self.getNewFilterData();
    }
  });
  $(".catalog-filter_change input").change(function() {
    var p0 = $("#price_0").val();
    var p1 = $("#price_1").val();
    $('.catalog-filter-change-price_slider-range').slider("option", "values", [p0, p1]);
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="mse2_ms|price" class="catalog_filter catalog-filter_price fieldset">
  <div class="catalog-filter_title">Цена</div>
  <div class="catalog-filter_change">
    <div class="mse2_number_inputs catalog-filter-change-price_slider-inputs">
      <input type="input" name="price__gte" id="price_0" value="1" class="form-control input-sm" />
      <input type="input" name="price__lte" id="price_1" value="5" class="form-control input-sm" />
    </div>
    <div class="mse2_number_slider catalog-filter-change-price_slider-range"></div>
  </div>
</div>