Слайдер Jquery и обратная связь по номеру

Question

не очень сильный в 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();
        }
    });


<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="{{ 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>
                            </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>