Eval for More Range Sliders

Topic: Eval for More Range Sliders

BeldenSpartan premium asked 2 years 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 -

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

<p>You shouldn't use eval for security reasons. More information about this can be found here: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval" target="_blank" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval</a>!</p>

<p>Try to create a function that will create new sliders:</p>

<pre class="prettyprint"><code>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;
  });
};
</code></pre>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

BeldenSpartan

Premium support 129Support score
10Questions 7Answers 2Snippets