Simple RGB Color Slider Javascript

codinglabsolution
Simple RGB Color Slider Javascript
This JavaScript implementation showcases a straightforward RGB Color Slider. By manipulating the individual sliders for red, green, and blue components, users can dynamically create a wide spectrum of colors. The simplicity and intuitiveness of this interface offer an accessible way to experiment with RGB color combinations, making it a handy tool for both beginners and experienced designers alike.

Simple RGB Color Slider Javascript.[Source Code]


To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.


<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>RGB Color Slider</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="wrapper"> <label for="red">R</label> <input type="range" min="0" max="255" value="0" id="red" /> </div> <div class="wrapper"> <label for="green">G</label> <input type="range" min="0" max="255" value="0" id="green" /> </div> <div class="wrapper"> <label for="blue">B</label> <input type="range" min="0" max="255" value="0" id="blue" /> </div> <div class="result"> <input type="text" value="rgb(0,0,0)" readonly /> <button id="copy-btn">Copy Color Code</button> </div> </div> <!-- Script --> <script> const result = document.querySelector(".result input"); const copyBtn = document.getElementById("copy-btn"); const sliders = document.querySelectorAll(".wrapper input[type='range']"); const rColor = document.getElementById("red"); const gColor = document.getElementById("green"); const bColor = document.getElementById("blue"); let generateColor = () => { let rColorValue = rColor.value; let gColorValue = gColor.value; let bColorValue = bColor.value; let finalColor = `rgb(${rColorValue}, ${gColorValue}, ${bColorValue})`; result.value = finalColor; document.body.style.backgroundColor = finalColor; }; let copyColorCode = () => { result.select(); document.execCommand("copy"); copyBtn.innerText = "Copied!"; setTimeout(() => { copyBtn.innerText = "Copy Color Code"; }, 1000); }; sliders.forEach((inp) => { inp.addEventListener("input", generateColor); }); window.addEventListener("load", generateColor); copyBtn.addEventListener("click", copyColorCode); </script> </body> </html>

CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.container {
  background-color: #ffffff;
  width: min(90%, 31.25em);
  padding: 4em 2em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  color: #142b37;
  font-weight: 600;
  border-radius: 0.5em;
  display: grid;
  justify-content: center;
  box-shadow: 0 2em 3em rgba(0, 0, 0, 0.2);
}
.wrapper {
  width: 100%;
  display: flex;
  align-items: space-between;
  gap: 1em;
  margin-bottom: 2.2em;
}

label {
  font-size: 1.8em;
}
input[type="range"] {
  width: 100%;
}
.result {
  width: 100%;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1em;
}
input[type="text"],
button {
  font-size: 1em;
  border-radius: 0.5em;
  border: none;
  outline: none;
}
input[type="text"] {
  background-color: #ebeaea;
  padding: 1.2em 0.5em;
  font-weight: 400;
}
input[type="text"]::selection {
  background-color: transparent;
}
button {
  background-color: #0075ff;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

We trust that you'll appreciate this captivating Simple RGB Color Slider Javascript.
<->
Simple RGB Color Slider Javascript, please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.

Conclusion

Congratulations on completing our comprehensive guide to Simple RGB Color Slider Javascript! Throughout this tutorial, you've delved into the fundamentals of front-end development, from crafting the HTML structure to adding interactivity with JavaScript. Remember, web development is an ever-evolving field, and this project is just the beginning. Keep experimenting, exploring, and refining your skills. Join developer communities, seek feedback, and stay curious—there's always more to learn!

codinglabsolution says...
code copied

تعليق واحد

  1. Good luck 👍
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.