function Control( el, { value = 10, min = 0, max = 100, minAngle = -90, maxAngle = 90, wheelSpeed = 0.1, step = 1, } = {} ) { const img = document.createElement("img"); img.src = "1@3x.png"; el.append(img); const ratio = (maxAngle - minAngle) / (max - min); //цена единицы value в градусах const getAngle = () => (value - min) * ratio + minAngle; //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу this.setValue = (newValue) => { if (newValue < min) { newValue = min; } if (newValue > max) { newValue = max; } value = newValue; if (typeof this.onchange === "function") { this.onchange(value); } img.style.transform = `rotate(${getAngle()}deg)`; }; this.getValue = () => value; img.onmousewheel = (e) => { const { deltaY } = e; e.preventDefault(); this.setValue(value + deltaY * wheelSpeed); }; img.onclick = (e) => { const { layerX } = e; console.log(e, layerX); if (layerX > img.width / 2) this.setValue(value + step); else this.setValue(value - step); }; this.setValue(value); }; let a, b, c; function setRGB() { a = red.getValue(); b = green.getValue(); c = blue.getValue(); let rgbDone = (div.style.background = `rgb(${a}, ${b}, ${c})`); return console.log(rgbDone); }; const red = new Control(colorbox, { min: 0, max: 255 }); red.onchange = setRGB; const green = new Control(colorbox, { min: 0, max: 255 }); green.onchange = setRGB; const blue = new Control(colorbox, { min: 0, max: 255 }); blue.onchange = setRGB; const volumeControl = new Control(colorbox, { value: 50 }); volumeControl.onchange = (value) => { audio.volume = value / 100; console.log("ON CHANGE", value); }; const audio = document.createElement("audio"); audio.setAttribute("controls", ""); audio.src = "Рингтон Доброго Вечора Ми З України - Probass X Hardi - mp36ka_net.mp3"; // путь к файлу могу не правильно указать, путаюсь audio.style.marginLeft = "200px"; document.body.append(audio); const div = document.createElement("div"); div.style.width = "725px"; div.style.height = "800px"; div.style.position = "relative"; div.style.bottom = "800px" div.style.zIndex = "-1" document.body.append(div);