noUiSlider (10.1.0): Slider was already initialized.

[tDuy]

Are you requesting a feature, reporting a bug or asking a question?

Question

What is the current behavior?

I use panel index to scroll to a specific panel in my questionnaire. I also create a custom noUiSlider widget. In 1.5.11 and later versions, I get this error: Uncaught Error: noUiSlider (10.1.0): Slider was already initialized. But this error does not happen in 1.5.10 and below. I tried to destroy the previous noUiSlider element but it still did not work. Could you take a look at my code? Thanks.

Provide the test code and the tested page URL (if applicable)

Test code URL: https://embed.plnkr.co/plunk/04Ni454pVilIqoTy

Specify your

• browser: Chrome
• browser version: 80.0.3987.132
• surveyjs platform: React
• surveyjs version: 1.5.11

[billymccafferty]

I'm getting the same problem; were you able to resolve this?

I tried forcing the package.json include for my project to be - "nouislider": "14.2.0" - but the SurveyJS widgets seems to pull down the 10.1.0 release regardless.

[tsv2013]

Transeferred to the corresponding repo

[tDuy]

My code works fine in SurveyJs 1.5.10, but it breaks in 1.5.11 and above. Updating to NoUISlider 14.2.0 in my custom widget doesn't fix this.

[tsv2013]

@tDuy Thank you for the additional info. I'm working with this issue right now. It duplicated in this thread also - https://surveyjs.answerdesk.io/ticket/details/t3768/multiple-forms-having-nouislider-results-in-exception-nouislider-10-1-0-slider-was

[tsv2013]

I've patched this function and your plunker now works ok for me:

function getNoUiSlider(element) {
  if (!element)
    return null;

  // I've added this check for the case if the element holds the noUiSlider instance
  if(element.noUiSlider) {
    return element.noUiSlider;
  }

  const $ = window["$"];
  var target = $(element).children(".noUi-target");
  // console.log("target", target)
  // console.log("el", element)
  if (target.length) {
    return target[0].noUiSlider;
  }

  return null;
}

The function getNoUiSlider seems like a custom one. We don't have similar function in our original code - https://github.com/surveyjs/widgets/blob/master/src/nouislider.js

[tsv2013]

I've added original nouislider implementation (https://github.com/surveyjs/widgets/blob/master/src/nouislider.js) into your plunker (https://embed.plnkr.co/plunk/04Ni454pVilIqoTy) and also got the "Slider was already initialized. " error.

At this moment I've got the following. For some reason then you are using layout effect function, we've got unexpected call sequence: SurveyCustomWidget.prototype.componentDidUpdate is called before the SurveyCustomWidget.prototype.componentWillUnmount

and indeed leads to the "Slider was already initialized" error and "getNoUiSlider" check.

[tsv2013]

For now you can fix the "getNoUiSlider" function as I wrote. On our side we'll investigate the issue.

[tsv2013]

I'm not sure, but this https://github.com/surveyjs/survey-library/issues/1998 can be related. Because in your sample you are changing the pages. I leave it here as a note.

[ruby0888]

@tsv2013 Please let me know once you resolve the issue. I have the same error.

[k-msalehi]

v15.5.1, Same issue.

[rlahfld54]

same issue

[rlahfld54]

window.onload = () => { const skipSlider = document.getElementById("skipstep"); noUiSlider.create(skipSlider, { range: { min: 0, "10%": 10, "20%": 20, "30%": 30, // Nope, 40 is no fun. "50%": 50, "60%": 60, "70%": 70, // I never liked 80. "90%": 90, max: 100, }, start: [0], step: 5, }); };