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 surveyjs/survey-library#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,
});
};