How do I showcase the selected value from a range selection?

user_13499542 0
Viewed 91

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.

css html javascript
1 Answers

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>

user_123096080
Related