HW_RGB/script.js

function Control(img, {
    value = 0, step = 1, max = 255, min = 0, maxAngle = 360, minAngle = 0},
                 inputId) {

    this.input = document.createElement('input');
    this.input.setAttribute('type', 'number');
    document.body.append(this.input);
    this.input.id = inputId;

    const ratio = (maxAngle - minAngle) / (max - min);

    const changeStep = () => (value - min) * ratio + minAngle;

    this.setValue = (newValue) => {
        if (newValue > max) newValue = max;
        if (newValue < min) newValue = min;

        value = newValue;

        if (typeof this.onChange === 'function') this.onChange(value);
        img.style.transform = `rotate(${changeStep()}deg)`;
    };

    const {
        left
    } = img.getBoundingClientRect();

    this.changeValue = delta => this.setValue(value + delta);

    img.onmousewheel = (e) => {
        e.preventDefault();
        this.changeValue(e.deltaY * step / 10)

    };

    img.onclick = (e) => {
        this.changeValue(e.clientX - left > img.width / 2 ? step : -step)
    };

    this.setValue(value);
    this.input.oninput = () => this.setValue(+value)

    this.onChange = function (value) {
        input.value = value
    }
}

const redControl = new Control(document.getElementById('red'),
    {value: 0, min: 0, max: 255, minAngle: 0, maxAngle: 360},'inputRed');

const greenControl = new Control(document.getElementById('green'),
    {value: 0, min: 0, max: 255, minAngle: 0, maxAngle: 360}, 'inputGreen');

const blueControl = new Control(document.getElementById('blue'),
    {value: 0, min: 0, max: 255, minAngle: 0, maxAngle: 360}, 'inputBlue');


redControl.onChange = function (value) {
    inputRed.value = value
}
greenControl.onChange = function (value) {
    inputGreen.value = value
  }
blueControl.onChange = function (value) {
    inputBlue.value = value
  }