How to add multiple shadow layers of boxShadow with Javascript

Question

I try to build a boxShadow generator, where the user can add multiple layers of boxShadow. Anything like the example below:

box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

What I have so far:

A constructor function, which creates my shadows.

function Shadow(paramId) {
    this.shadowId = paramId;
    this.horizontalValue = 'horizontalRange' + paramId;
    this.verticalValue = 'verticalRange' + paramId;
    this.blurValue = 'blurRange' + paramId;
    this.spreadValue = 'spreadRange' + paramId;
    this.colorValue = 'colorInput' + paramId;
}

...and a function, which gets the value of the sliders:

function getRangeValue () {
    const shadowBox = document.getElementById('shadowBox');
    let shadowId = this.id.slice(this.id.length - 1, this.id.length) - 1; // my Id's are like xOffset1
    let xValue = document.getElementById(shadowObjContainer[shadowId].horizontalValue).value;
    let yValue = document.getElementById(shadowObjContainer[shadowId].verticalValue).value;
    let blurValue = document.getElementById(shadowObjContainer[shadowId].blurValue).value;
    let spreadValue = document.getElementById(shadowObjContainer[shadowId].spreadValue).value;
    let colorValue = document.getElementById(shadowObjContainer[shadowId].colorValue).value;
    
    shadowParam = `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
   
    shadowBox.style.boxShadow = shadowParam;
}

It does work, that my sliders do what they are supposed to do. But I don't know, how to create another shadow parameter (", " + shadowParam).

Hopefully someone can help me. Thank you :)

Answer 1

A working example to work on was helpful. I hypothesized your environment and this is my commented idea.

// The class with all controls for each shadows
let Control = class {
  constructor(paramId) {
    this.shadowId = paramId;
    this.horizontalValue = 'horizontalRange' + paramId;
    this.verticalValue = 'verticalRange' + paramId;
    this.blurValue = 'blurRange' + paramId;
    this.spreadValue = 'spreadRange' + paramId;
    this.colorValue = 'colorInput' + paramId;
  }
}

// Generates the shadow for each initialized Control class 
function getRangeValue() {
  const shadowBox = document.getElementById('shadowBox');
  let shadowParam = '';
  for (let i = 0; i < Controls.length; i++) {
    let shadowId = Controls[i].shadowId;
    let xValue = document.getElementById(Controls[i].horizontalValue).value;
    let yValue = document.getElementById(Controls[i].verticalValue).value;
    let blurValue = document.getElementById(Controls[i].blurValue).value;
    let spreadValue = document.getElementById(Controls[i].spreadValue).value;
    let colorValue = document.getElementById(Controls[i].colorValue).value;

    shadowParam = (shadowParam == '' ? '' : shadowParam + ', ') + `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
  }
  shadowBox.style.boxShadow = shadowParam;
}

// Initialization of the Control classes based on the "group" of controls named "ShadowControls"
let ShadowControlsEl = document.getElementsByClassName("ShadowControls");
let Controls = Array();
for (let i = 0; i < ShadowControlsEl.length; i++) {
  Controls.push(new Control(i + 1));
}

// Generate the first Shadows
getRangeValue();

// Initialize listeners for values change
let AllControls = document.getElementsByClassName('listener');
for (let i = 0; i < AllControls.length; i++) {
  AllControls[i].addEventListener('change', getRangeValue);
}

#shadowBox {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color:#ff00ff;
}

<div class="ShadowControls">
  <input id="horizontalRange1"  class="listener" type="range" min="-100" max="100" value="10">
  <input id="verticalRange1"    class="listener" type="range" min="-100" max="100" value="10">
  <input id="blurRange1"        class="listener" type="range" min="0" max="100" value="0">
  <input id="spreadRange1"      class="listener" type="range" min="0" max="100" value="0">
  <input id="colorInput1"       class="listener" type="color" value="#FF0000">
</div>
<hr>
<div class="ShadowControls">
  <input id="horizontalRange2"  class="listener" type="range" min="-100" max="100" value="-10">
  <input id="verticalRange2"    class="listener" type="range" min="-100" max="100" value="-10">
  <input id="blurRange2"        class="listener" type="range" min="0" max="100" value="0">
  <input id="spreadRange2"      class="listener" type="range" min="0" max="100" value="0">
  <input id="colorInput2"       class="listener" type="color" value="#FFFF00">
</div>



<div id="shadowBox">
  Shadow here
</div>