JSFiddle - React, Tailwind, and code Playground

by Juan Manuel Cruz

HTML

<input type="range" name="a" min="0" max="359">
<input type="range" name="b" min="0" max="359">
<input type="range" name="c" min="0" max="359">
<!-- <input type="range" name="direction" min="0" max="359"> -->

CSS

body {
/*   height: 100vh;
  width: 100vw; */
  --color-a: 128;
  --color-b: 128;
  --color-c: 128;
  --color-d: 60;
  /* background: hsl(var(--color-a), 100%, 100%); */
  /* background-color: hsl(var(--color-d), 100%, 75%); */
background: linear-gradient(to right, hsl(var(--color-a), 100%, 60%), hsl(var(--color-b), 100%, 60%), hsl(var(--color-c), 100%, 60%));
}

JavaScript

const body = document['body']

const changer = e => {
	body.style.setProperty(`--color-${e.target.name}`, parseInt(e.target.value))
  console.log(body.style)
}

const inputs = document.querySelectorAll('input')
inputs.forEach(x => {
	x.addEventListener('change', changer)
})