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())
//пришейте к нему тэг audio для громкости
//


function setRGB() {
   document.body.style.backgroundColor = `rgba(${red.getValue()},${green.getValue()},${blue.getValue()})`;
}

const red = new Control(container1, { min: 0, max: 255 })
red.onchange = setRGB
const green = new Control(container1, { min: 0, max: 255 })
green.onchange = setRGB
const blue = new Control(container1, { min: 0, max: 255 })
blue.onchange = setRGB

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

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