我正在使用jQuery UI滑块开发范围滑块。为此,我必须满足以下条件:如果当前url包含特定字符串,它将触发create事件作为滑块的一部分,在该滑块中我需要动态设置值。

这是我的代码当前的样子:

<div class="controls">
  <div id="price-range"></div>
  <div class="textinputs">
    <input id="price-min" type="text" value="2"/>
    <input id="price-max" type="text" value="1050"/>
  </div>
</div>


和JS:

    if (window.location.href.indexOf("min-price") > -1) {
      var url2 = window.location.href;
      var newMinPrice= url2.replace( /[^0-9]/g, '' );
      $('#price-range').slider({
        range: true,
        min: 0,
        max: 1050,
        values: [0, 1050],
        create: function(event, ui){
      $('#price-min').val(newMinPrice);
    },
        slide: function(event, ui) {
          $('#price-min').val(ui.values[0]);
          $('#price-max').val(ui.values[1]);
        },
        change: function( event, ui ) {
          var minPrice = "min-price-" + ($('#price-min').val());
          var maxPrice = "max-price-" + ($('#price-max').val());
          $('.min-price a').text(minPrice);
          $('.min-price a').trigger('click');
        }
      });
    }


如您所见,我正在使用newMinPrice变量并将输入值设置为此。这可以正常工作,但是我的问题是,尽管它可以正确设置输入的值,但不会将滑块控件的位置更新到正确的位置。有人知道该怎么做吗?

最佳答案

尝试使用values选项,该选项设置所有句柄的值。



$( ".selector" ).slider( "values", [ 55, 105 ] );




$('#price-range').slider({
  range: true,
  min: 0,
  max: 1050,
  values: [0, 1050],
  create: function(event, ui) {
    var minPrice = $('#price-min').val()
    var maxPrice = $('#price-max').val()
    $('#price-range').slider("values", [minPrice, maxPrice]);
  },
  slide: function(event, ui) {
    $('#price-min').val(ui.values[0]);
    $('#price-max').val(ui.values[1]);
  },
  change: function(event, ui) {
    var minPrice = "min-price-" + ($('#price-min').val());
    var maxPrice = "max-price-" + ($('#price-max').val());
    $('.min-price a').text(minPrice);
    $('.min-price a').trigger('click');
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="controls">
  <div id="price-range"></div>
  <div class="textinputs">
    <input id="price-min" type="text" value="100" />
    <input id="price-max" type="text" value="600" />
  </div>
</div>

关于javascript - 在create事件中动态设置jQuery ui滑块值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56855424/

10-11 22:48
查看更多