test.html

<link rel='stylesheet' href='type/css/Piksels.css'/>
<div class='Piksels noLowercase'>

<p contenteditable="true" class="lineView">ZX SPECTRUM</p>
<div class='varSup' id='sliders-Piksels'><input type='range' class='ax' min='0.0' max='800.0' value='0.0' id='PikselsPIXL'>PIXL <input type='range' class='ax' min='0.0' max='6.0' value='0.0' id='PikselsCHAR'>CHAR <input type='range' class='ax' min='50.0' max='100.0' value='100.0' id='PikselsPROP'>PROP <input type='range' class='ax' min='-50.0' max='50.0' value='0.0' id='Pikselsslnt'>slnt <input type='range' class='ax' min='0.0' max='360.0' value='0.0' id='PikselsROTA'>ROTA </div>
<script>
const PikselsSliders = document.querySelector("#sliders-Piksels");
PikselsSliders.oninput = PikselsChanger;
function PikselsChanger(e) {
  let fontElements = document.querySelectorAll("div.Piksels");
  fontElements.forEach(function (fontElement) {
    fontElement.style.cssText =
      "font-variation-settings:" +
"'PIXL' " + document.querySelector("#PikselsPIXL").value
+",'CHAR' " + document.querySelector("#PikselsCHAR").value
+",'PROP' " + document.querySelector("#PikselsPROP").value
+",'slnt' " + document.querySelector("#Pikselsslnt").value
+",'ROTA' " + document.querySelector("#PikselsROTA").value
  });}</script>
</div>