input(type='range', min='1', max='42', value='10')

ul
  each _, idx in { length: 42 }
    li= idx + 1

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

li {
  list-style: none;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 0;
  background: #ccc content-box;
}

const styleEl = document.createElement("style");
document.head.appendChild(styleEl);

const styleSheet = styleEl.sheet;
const ruleIndex = 0;
const ruleText = `li:nth-child(0) { background-color: green }`;
styleSheet.insertRule(ruleText, ruleIndex);

document
  .querySelector("input[type='range']")
  .addEventListener("input", (event) => {
    styleSheet.cssRules[ruleIndex].selectorText = `li:nth-child(${event.target.value})`;
  });