Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "RGB Color Slider" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "RGB Color Slider" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
RGB Color Slider [Source Code]
To get the following HTML, CSS & JS code for the RGB Color Slider project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB Color Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>RGB Color Slider</h3>
<div class="colorPreview"></div>
<div class="colorContainer">
<div class="box">
<label for="red">R</label>
<input type="range" value="0" min="0" max="255" id="red">
</div>
<div class="box">
<label for="green">G</label>
<input type="range" value="0" min="0" max="255" id="green">
</div>
<div class="box">
<label for="blue">B</label>
<input type="range" value="0" min="0" max="255" id="blue">
</div>
</div>
<div class="buttonContainer">
<input type="text" id="colorCode" value="rgb(0,0,0)" readonly>
<button class="copyCodeBtn">Copy Code</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: lightskyblue;
}
.container {
padding: 10px;
border: 2px dashed darkblue;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 20px;
}
h3 {
color: darkblue;
text-align: center;
margin-bottom: -10px;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 2px;
}
.colorPreview {
width: 300px;
height: 200px;
border: 2px solid darkblue;
border-radius: 10px 50%;
}
.colorContainer {
display: flex;
flex-direction: column;
gap: 15px;
}
.box {
display: flex;
justify-content: space-between;
align-items: center;
}
.box label {
font-weight: 600;
}
.box input {
width: 90%;
cursor: pointer;
}
.buttonContainer {
display: flex;
flex-direction: column;
gap: 15px;
}
.buttonContainer input {
width: 100%;
height: 50px;
font-size: 20px;
text-align: center;
border: 2px solid darkblue;
border-radius: 10px;
background-color: aliceblue;
color: darkblue;
outline: none;
}
.buttonContainer input::selection {
background-color: none;
}
.buttonContainer .copyCodeBtn {
width: 100%;
height: 40px;
font-size: 15px;
font-weight: 600;
color: white;
background-color: darkblue;
text-transform: uppercase;
letter-spacing: 3px;
border: 2px solid darkblue;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.buttonContainer .copyCodeBtn:hover {
color: darkblue;
background-color: transparent;
}
JavaScript
const colorPreviewEl = document.querySelector(".colorPreview");
const boxInputEls = document.querySelectorAll(".box input");
const colorCodeEl = document.querySelector("#colorCode");
const copyCodeBtnEl = document.querySelector(".copyCodeBtn");
// It generates RGB Color based on our input change
function generateRGBColor(){
const R = boxInputEls[0].value;
const G = boxInputEls[1].value;
const B = boxInputEls[2].value;
colorPreviewEl.style.backgroundColor = `rgb(${R},${G},${B})`;
colorCodeEl.value = `rgb(${R},${G},${B})`
}
// Whenever we change the input then it calls generateRGBColor function.
boxInputEls.forEach((e)=>{
e.addEventListener("input",generateRGBColor)
})
// Checks that navigator API is present or not
copyCodeBtnEl.addEventListener("click",()=>{
// If the navigator API is not present then it shows a alert message else it copies to our clipboard.
if (!navigator.clipboard) {
alert("Clipboard API is not available")
return
}
else{
const text = colorCodeEl.value;
navigator.clipboard.writeText(text);
copyCodeBtnEl.innerHTML = 'Copied to clipboard'
setTimeout(() => {
copyCodeBtnEl.innerHTML = "Copy Code"
}, 2000);
}
})
generateRGBColor();
Generating Download Link...