jsColorPickerAdvClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
    <style>
        html,
        body {
            display: flex;
            width: 95%;
            height: 95%;
            min-width: 810px;
            min-height: 410px;
            align-items: center;
            justify-content: center;
            margin: 8px 15px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }

        #main {
            width: 100%;
            height: 50%;
            flex-direction: column;
        }

        #rgbContainer {
            width: 100%;
            height: 50%;
            background-color: grey;
            border: 2px solid black;
        }

        .colorBlock {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 30%;
            height: 95%;
            margin: auto;
            border: 4px solid white;
        }

        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #blue {
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="main" class="centered">
        <div id="rgbContainer" class="centered" tabindex="1">
            <div id="red" class="colorBlock">
            </div>
            <div id="green" class="colorBlock">
            </div>
            <div id="blue" class="colorBlock">
            </div>
        </div>
    </div>
    <script>
        'use strict'
        class ColorPicker {
            constructor() {
                this._red = 0;
                this._green = 0;
                this._blue = 0;
                this._active = 'active';
            }

            static deltaQ = 10;
            static colorElements = ['red', 'green', 'blue'];

            get red() { return this._red; }
            get green() { return this._green; }
            get blue() { return this._blue; }

            set red(val) { this._red = Math.min(Math.max(0, val), 255); this._updateColor(); }
            set green(val) { this._green = Math.min(Math.max(0, val), 255); this._updateColor(); }
            set blue(val) { this._blue = Math.min(Math.max(0, val), 255); this._updateColor(); }

            _updateColor() {
                const rgbContainer = document.getElementById('rgbContainer');
                rgbContainer.style.backgroundColor = `rgb(${this.red}, ${this.green}, ${this.blue})`;
            }

            handleEvent(event) {
                this[`on${event.type[0].toUpperCase()}${event.type.slice(1)}`](event);
            }

            onWheel(event) {
                const color = event.target.id;
                if (ColorPicker.colorElements.includes(color)) {
                    event.preventDefault();
                    this[color] += (event.deltaY > 0 ? -ColorPicker.deltaQ : ColorPicker.deltaQ);
                }

                if (color == 'rgbContainer') {
                    event.preventDefault();

                    for (let colorId of ColorPicker.colorElements) {
                        this[colorId] += (event.deltaY > 0 ? -ColorPicker.deltaQ : ColorPicker.deltaQ);
                    }
                }
            }
        }

        const rgbContainer = document.getElementById('rgbContainer');
        let colorPicker = new ColorPicker();
        rgbContainer.addEventListener('wheel', colorPicker);

    </script>
</body>
</html>