原文：http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html
:root { --footer-color: #2cba92; /* @reasonCode зеленый */ --palatte-padding-left: 0px }
footer { width: 50px; height: 50px; margin-top: 20px; margin-left: var(--palatte-padding-left); background-color: var(--footer-color); border-radius: 15px; }
const footer = document.querySelector('footer')
const inputs = [].slice.call(document.querySelectorAll('input'));
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
function handleUpdate(e) {
if (this.type === 'color') {
footer.style.setProperty('--footer-color', this.value)
} else {
footer.style.setProperty('--palatte-padding-left', this.value + 'px')
}
}
<body style="padding: 20px">
<label>Выберите свой любимый цвет:</label>
<input type="color" value="#2cba92">
<br/>
<label>Настройте отступ:</label>
<input type="range" id="margin" min="10" max="200" value="0">
<footer></footer>
</body>