Question

我在我的应用程序中使用 this noUiSlider 。但我无法使用其set方法并以编程方式设置其值。我试着如下：

$(this).noUiSlider.set([null, 2000000]);

但它会引发控制台错误，说$(this).noUiSlider.set([null, 2000000]); 不确定什么是正确的方法。根据 their docs ，它应该有效.. Here is the demo

HTML

<div class="form-group">
  <label>Price Range?</label>
  <div class="ui-slider" id="price-slider" data-value-min="10000" data-value-max="4000000" data-value-type="price" data-currency="&#8377;" data-home="home" data-currency-placement="before">
    <div class="values clearfix">
      <input class="value-min" name="value-min[]" readonly>
      <input class="value-max" name="value-max[]" readonly>
    </div>
    <div class="element"></div>
  </div>
</div>

和 JS

if ($('.ui-slider').length > 0) {
  $('.ui-slider').each(function() {
    var step;
    if ($(this).attr('data-step')) {
      step = parseInt($(this).attr('data-step'));
    } else {
      step = 10;
    }
    var sliderElement = $(this).attr('id');
    var element = $('#' + sliderElement);
    var valueMin = parseInt($(this).attr('data-value-min'));
    var valueMax = parseInt($(this).attr('data-value-max'));
    $(this).noUiSlider({
      start: [valueMin, valueMax],
      connect: true,
      range: {
        'min': valueMin,
        'max': valueMax
      },
      step: step
    });
    if ($(this).attr('data-value-type') == 'price') {
      if ($(this).attr('data-currency-placement') == 'before') {
        $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({
          prefix: $(this).attr('data-currency'),
          decimals: 2,
          thousand: ','
        }));
        $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({
          prefix: $(this).attr('data-currency'),
          decimals: 2,
          thousand: ','
        }));
      } else if ($(this).attr('data-currency-placement') == 'after') {
        $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({
          postfix: $(this).attr('data-currency'),
          decimals: 0,
          thousand: ' '
        }));
        $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({
          postfix: $(this).attr('data-currency'),
          decimals: 0,
          thousand: ' '
        }));
      }
    } else {
      $(this).Link('lower').to($(this).children('.values').children('.value-min'), null, wNumb({
        decimals: 0
      }));
      $(this).Link('upper').to($(this).children('.values').children('.value-max'), null, wNumb({
        decimals: 0
      }));
    }
    if ($(this).attr('id') == "price-slider")
      $(this).noUiSlider.set([null, 2000000]); //error here, doesn't identify the function.
  });
}

感谢任何帮助！

Answer 1

Buggy滑块。

您是否有机会将noUISlider更新为最新version 8.2.1 - 2015-12-02 21:43:14？你有一年多以前的一个。

当你在$(this).

的循环中使用它时，它似乎无法正常工作

我删除了所有Link＆amp; To这些东西，因为我不知道它是否与滑块有关并且导致错误。

看看是否有效：

    if ($('.ui-slider').length > 0) {
      $('.ui-slider').each(function() {
        var step;
        if ($(this).attr('data-step')) {
          step = parseInt($(this).attr('data-step'));
        } else {
          step = 10;
        }
        var sliderElement = $(this).attr('id');
        var element = $('#' + sliderElement);
        var valueMin = parseInt($(this).attr('data-value-min'));
        var valueMax = parseInt($(this).attr('data-value-max'));

//Get Slider old-fashioned way, since you already have its ID
        var sss = document.getElementById(sliderElement)

        noUiSlider.create(sss,{
          start: [valueMin, valueMax],
          connect: true,
          range: {
            'min': valueMin,
            'max': valueMax
          },
          step: step
        });

        if (sliderElement == "price-slider")
          sss.noUiSlider.set([null, 2000000]); //error here
      });
    }

$（...）。noUiSlider.set不是`function`

1 个答案: