$(...).noUiSlider.set 不是一个“函数”

Question

我在我的应用程序中使用 this noUiSlider。但是我不能使用它的 set 方法并以编程方式设置它的值。我正在尝试如下：

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

但是它抛出控制台错误说 $(this).noUiSlider.set([null, 2000000]); 不确定什么是正确的方法。根据their docs it should be working.. 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

有问题的滑块。

你有机会把 noUISlider 更新到最新的 version 8.2.1 - 2015-12-02 21:43:14 吗？你有一个一年多前的。

此外，当您在 $(this).

循环中使用它时，它似乎效果不佳

我删除了所有 Link 和 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 不是一个“函数”

$(...).noUiSlider.set is not a `function`

jquery

nouislider