JavaScript/Pavlov_hm11/script/script.js

function Control(el, {min=0, 
                      max=100, 
                      step=1, 
                      value=100, 
                      onChange, 
                      minAngle=0, 
                      wheelStepRatio=0.01,
                      maxAngle=360,
                      src='img/1@3x.png'} = {}){
    
    const img = document.createElement('img');
    el.appendChild(img);
    img.src = src;
    const angleRatio = (maxAngle - minAngle) / (max - min);
    
    const getAngle = () => { 
        const offset = value - min;
        const angleOffset = offset * angleRatio;
        const angle = minAngle + angleOffset;
        return angle
    };
    
    const updateImg = (angle=getAngle()) => img.style.transform = `rotate(${angle}deg)`;
    updateImg();

    const updateValue = (st=step) => {
        value >= max ? value -= max : value < 0 ? value += max : value;
        value += st;
        updateImg();
    };

    img.onclick = (e) => {
        console.log(e);
        const {x: imgX, width: imgWidth } = img.getBoundingClientRect();
        const xOnImg = e.clientX - imgX;
        const st = xOnImg > imgWidth/2 ? step: -step;
        updateValue(st);
    };

    img.onmousewheel = e => {
        const st = e.deltaY*wheelStepRatio;
        updateValue(st);
    };

    const toDeg = rad => (360/(2*Math.PI))*rad;
    let start;
    
    const getAngleByCoords = (x, y) => {
        const {x: imgX, y: imgY, width, height} = img.getBoundingClientRect();
        const xOnImg = e.clientX - imgX - width/2;
        const yOnImg = e.clientY - imgY - height/2;
        return toDeg(Math.atan2(yOnImg, xOnImg));
    };

    img.onmousedown = e => {
        start = getAngleByCoords(e);
        e.preventDefault();
    };
    img.onmousemove = e => {
        if (e.buttons && start){
        const angleDiff = getAngleByCoords(e)- startAngle;
        const angle = getAngle();
        updateImg(angle + angleDiff);
        };
    };
    img.onmouseup = e => {
        let inValue = endAngle / ((maxAngle - minAngle) / (max - min))%100;
        value = inValue < 0 ? 75 + (25 + inValue) : inValue;
        updateImg(endAngle);
    };
    this.getValue = function () {
		return Math.floor(value);
    }
}
let controlRed = new Control(control1, max = 255);
let controlGreen = new Control(control2, max = 255);
let controlBlue = new Control(control3, max = 255);

controlRed.setValue;
controlGreen.setValue;
controlBlue.setValue;

let body = document.querySelector('body');
control1.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #fe3f44;background:#fe3f44`;
control2.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #80ea69;background:#80ea69`;
control3.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #3e94d1; background:#3e94d1`;
body.onmousemove = () => {            //я хз
	control4.style = `background:rgba(${controlRed.getValue()},${controlGreen.getValue()},${controlBlue.getValue()},1);height: 362px;width: 362px;border-radius: 50%; border:solid 10px pink;`;
};