Eval for More Range Sliders


Topic: Eval for More Range Sliders

BeldenSpartan pro premium asked 1 months 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 months 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.
Status

Answered

Specification of the issue
  • User: Pro
  • 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