RGB Slider

Change background color by sliders (pure JS)

by Michał Oręziak

HTML

R<input type="range" id="r" min="0" max="255">
G<input type="range" id="g" min="0" max="255">
B<input type="range" id="b" min="0" max="255">
<p id="info"></p>

CSS

input, button{
  display:block;
}

JavaScript

const rSlider = document.querySelector('#r');
const gSlider = document.querySelector('#g');
const bSlider = document.querySelector('#b');
const infoEl = document.querySelector('#info');
const body = document.querySelector('body');
function changeBg(){
infoEl.innerHTML = 'R: '+rSlider.value +
										' G: '+gSlider.value +
                    ' B: '+bSlider.value
body.style.backgroundColor =
'rgb('+rSlider.value+','+
gSlider.value+','+
bSlider.value+')';
}
rSlider.addEventListener("input", changeBg);
gSlider.addEventListener("input", changeBg);
bSlider.addEventListener("input", changeBg);