原文：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>