Solution 1 :

By default, a div’s size is 0 by 0. You just need to add some style to the display to give it some size, then the background will be visible:

<body>
    <div class="picker">
        Red <input type="range" min="0" max="255" step="1" id="red" value="115">
        Green <input type="range" min="0" max="255" step="1" id="green" value="10">
        Blue <input type="range" min="0" max="255" step="1" id="blue" value="162">
        <div id="display" style="height: 50px; width: 50px;"></div>
    </div>

    <script type="text/javascript">
        var input = document.querySelectorAll("input");
        for (var i = 0; i < input.length; i++) {
            input[i].addEventListener("input",

                function () {
                    var
                        red = document.getElementById("red").value,
                        green = document.getElementById("green").value,
                        blue = document.getElementById("blue").value;

                    var display = document.getElementById("display");
                    display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
                }
            );
        }
    </script>
</body>

Problem :

I’m working on a Javascript RGB Color Picker and struggling with the front-end.

A RGB Color Picker results in a color that exists within the combination of three values (R,G,B), with each value having a range of 0 – 255.

This is my project so far, it allows an user to pick a combination from a range selection but it doesn’t showcase the value that he picked.

<body>
    <div class="picker">
        Red <input type="range" min="0" max="255" step="1" id="red" value="115">
        Green <input type="range" min="0" max="255" step="1" id="green" value="10">
        Blue <input type="range" min="0" max="255" step="1" id="blue" value="162">
        <div id="display"></div>
    </div>

    <script type="text/javascript">
        var input = document.querySelectorAll("input");
        for (var i = 0; i < input.length; i++) {
            input[i].addEventListener("input",

                function () {
                    var
                        red = document.getElementById("red").value,
                        green = document.getElementById("green").value,
                        blue = document.getElementById("blue").value;

                    var display = document.getElementById("display");
                    display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")";
                }
            );
        }
    </script>
</body>

How do I showcase the selected value from the range selection so that the user knows the combination he is selecting?

I’m new to JS, HTML and CSS so I have no idea what I’m supposed to do.

Comments

Comment posted by Gabriel Pulga

I did that within my style tag. Didn’t put it here because thought it wasn’t relevant. But, even so, how does that showcase the value of the selected range? I want the combined value showcased in a numbers scale (R,G,B) or hex (even better)

Comment posted by Alexanderbira

If you want to display the updating RGB value as text, replace

By

Leave a Reply

Your email address will not be published. Required fields are marked *