Topic: Eval for More Range Sliders

BeldenSpartan premium asked 1 year ago


When a user adds an asset to a group, I need to create a new range slider for that asset. Currently, I have a big if statement that allows for the creation of up to 20 sliders. Here's a snippet:

else if (assetnum ==2) {
  const basicExample2 = document.querySelector('.multi-ranges-start-values-2');
  const oneRangeValueBasic2 = document.querySelector('#multi-ranges-start-values-show-2');
  const basicExampleInit2 = new mdb.MultiRangeSlider(basicExample2, { tooltips: true, startValues: [0, 100] });
  basicExample2.addEventListener('value.mdb.multiRangeSlider', (e) => {
  const [first, second] = e.values.rounded;
  document.getElementById(lid).value = first;
  document.getElementById(uid).value = second;
  });

I repeat this "else if" 20 times. I'd rather replace it with a more concise piece of code. Consequently, I tried the following:

  eval("const basicExample" + assetnum.toString() + " = document.querySelector('.multi-ranges-start-values-" + assetnum.toString() + "');");
  eval("const oneRangeValueBasic" + assetnum.toString() + " = document.querySelector('#multi-ranges-start-values-show-" + assetnum.toString() + "');");
  eval("const basicExampleInit" + assetnum.toString() + " = new mdb.MultiRangeSlider(basicExample" + assetnum.toString() + ", { tooltips: true, startValues: [0, 100] });");
  eval("basicExample" + assetnum.toString() + ".addEventListener('value.mdb.multiRangeSlider', (e) => {const [first, second] = e.values.rounded; document.getElementById(lid).value = first; document.getElementById(uid).value = second;})");

Unfortunately, this doesn't work. If I replace the first eval with the explicit code, the rest seems to execute fine. I've verified that the resulting string in the eval does indeed match the explicit version. Is there a reason why eval won't work in this case? Are there any alternatives I should consider to be able to add many range-sliders to a page?

Thank you in advance -


Grzegorz Bujański staff answered 1 year ago


You shouldn't use eval for security reasons. More information about this can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!

Try to create a function that will create new sliders:

const createRange = (assetnum, lid, uid) => {
  const rangeElement = document.querySelector(`.multi-ranges-start-values-${assetnum}`);
  const oneRangeValueBasic = document.querySelector(`#multi-ranges-start-values-show-${assetnum}`);
  const rangeInstance = new mdb.MultiRangeSlider(rangeElement, {
    tooltips: true,
    startValues: [0, 100],
  });
  rangeElement.addEventListener('value.mdb.multiRangeSlider', (e) => {
    const [first, second] = e.values.rounded;
    document.getElementById(lid).value = first;
    document.getElementById(uid).value = second;
  });
};


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No