function Control(el, {value=50,
	min=0,
	max=100,
	minAngle=-90, //9 часов
	maxAngle=90,  //3 часа
	wheelSpeed=0.1,
	imgUrl='1@3x.png',
	step=3}={}){

	const img = document.createElement('img');
	img.src   = imgUrl;
	el.append(img)

	//из value с учетом min max и minAngle maxAngle посчиитать угол
	const ratio = (maxAngle - minAngle) / (max - min)
	const getAngle = () => minAngle + ratio * value

	this.setValue = newValue => {
		if (newValue < min){
			newValue = min
		}
		if (newValue > max){
			newValue = max
		}
		if (typeof this.onchange === 'function' && newValue !== value){
			this.onchange(newValue)
		}
		value = newValue
		img.style.transform = `rotate(${getAngle()}deg)`
	}

	img.onmousewheel = (event) => {
		const {deltaY} = event
		this.setValue(value + deltaY*wheelSpeed)
		event.preventDefault()
	}

	img.onclick = (event) => {
		const {layerX} = event
		this.setValue(value + (layerX < img.width/2 ? -step: step ))
	}

	this.getValue = () => value
	this.setValue(value)
}



const volumeControl  = new Control(container1, {value: 0})
volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
//volumeControl.setValue(75)
// console.log(volumeControl.getValue())
// console.log(volumeControl2.getValue())
//пришейте к нему тэг audio для громкости
//


function setRGB(){
	rgb_box.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`;
}

const red  = new Control(container2, {min: 0, max: 255});
red.onchange = setRGB;

const green  = new Control(container2, {min: 0, max: 255});
green.onchange = setRGB;

const blue  = new Control(container2, {min: 0, max: 255});
blue.onchange = setRGB;

//сделать три крутилки для RGB
//и обновлять цвет блока/фона блока при вращении любой из трех

//setTimeout(() => volumeControl.setValue(80), 2000)