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

Question

I am using this noUiSlider in my application. But I cannot use its set method and set its value programatically. I was trying as below:

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

But it throws console error saying $(this).noUiSlider.set([null, 2000000]); Not sure what's the correct way. According to 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>

and 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.
  });
}

Any help is appreciated!

Answer 1

Buggy slider.

Any chance you can update noUISlider to latest version 8.2.1 - 2015-12-02 21:43:14 ? You have one from over a year ago.

Also it doesn't seem to work well when you use it in a loop with $(this).

And I removed all the Link & To stuff, as I don't know if it relates to the slider and it was causing error.

See if this works:

    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
      });
    }