时间戳

首页 > 解决方案 > 如何获得 jquery 滑块反馈？

javascript - 如何获得 jquery 滑块反馈？

问题描述

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

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

标签： javascriptjqueryhtmljquery-ui

解决方案

这的基础是这样的：

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

推荐阅读