<input id="colorRange" type="range" min="0" max="360" step="0.01" value="0">

<div class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit maxime id dignissimos laudantium. Atque laboriosam voluptates enim accusantium, tempora mollitia. Doloremque unde nihil quas necessitatibus quo ut consequuntur tempore ipsum!
</div>

.content {
  padding: 1em;
  color: #2b2b2b;
  font-size: 18px;
}

const styles = document.createElement('style');
document.head.appendChild(styles);
styles.sheet.insertRule('.content {}', 0);
const cssRule = styles.sheet.cssRules[0];

colorRange.addEventListener('input', ({target: {value}}) => {
  cssRule.style.color = `hsl(${value}, 70%, 50%)`;
  cssRule.style.backgroundColor = `hsl(${value + 180}, 30%, 90%)`;
});

colorRange.dispatchEvent(new Event('input'));