RGBColorSlider | Creating a RGB Color Picker with JavaScript

RGBColorSlider is a javascript color picker based on vanilla javascript, which can allow us to get rgb value by sliders. In this tutorial, we will implement a rgb color picker with some steps using it.

View rgb color slider demo

How to create a rgb color slider using RGBColorSlider?

1.Import css file

<link rel="stylesheet" href="css/style.css">

2.Create a div to display the color slider

               <div id="color-display"></div>
                </div>
                <div class="sliders">
                    <div>
                        <label for="red">Red</label>
                        <input type="number" id="redNum">
                        <input value="200" type="range" min="0" max="255" id="red">
                    </div>
                    <div>
                        <label for="green">Green</label>
                        <input type="number" id="greenNum">
                        <input value="130" type="range" min="0" max="255" id="green">
                    </div>
                    <div>
                        <label for="blue">Blue</label>
                        <input type="number" id="blueNum">
                        <input value="180" type="range" min="0" max="255" id="blue">
                    </div>
                </div>

Color slider will be displayed in div sliders. Div color-display will display the effect of rgb color.

3.Import javascript file

<script src="js/main.js"></script>

You should notice:

All id value of all div and input should not be changed. If you changed, you should modify the main.js