function updateSlider(id, slider, sValue, sColor, sWidth, size, valueTemplate) {

    textAlign(CENTER, CENTER);

    let sRounded = round(sValue);

    let sText = "0x"+sRounded.toString(16);

    sText = sText.toUpperCase();

    text(sText, slider.x + sWidth / 2, slider.y - 12);

    return uiSlider(id, valueTemplate, slider.x, slider.y, sWidth, size, 10, sColor, 255);

}

​

​

class RgbSliders {

  constructor(id, x, y, width, size) {

    this.id = id;

    this.width = width / 3;

    this.rSlider = {

      x: x + this.width * 0,

      y: y,

      width: this.width

    }

    this.gSlider = {

      x: x + this.width * 1,

      y: y,

      width: this.width

    }

    this.bSlider = {

      x: x + this.width * 2,

      y: y,

      width: this.width

    }

    this.size = size;

    this.rValue = 0;

    this.gValue = 0;

    this.bValue = 0;

​

    this.valueTemplate = {

      min: 0,

      max: 255,

      value: 0

    };

  }

​

  getColor() {

    return { r: this.rValue, g: this.gValue, b:this.bValue };

  }

  update() { // id, value, x, y, width, size, rounding, backgroundcolor, slidecolor)

    let rColor = {

      r: this.rValue,

      g: 0,

      b: 0

    };

    let gColor = {

      r: 0,

      g: this.gValue,

      b: 0

    };

    let bColor = {

      r: 0,

      g: 0,

      b: this.bValue

    };

    push()

    this.rValue = updateSlider(this.id + ":r", this.rSlider, this.rValue, rColor, this.width, this.size, this.valueTemplate);

    this.gValue = updateSlider(this.id + ":g", this.gSlider, this.gValue, gColor, this.width, this.size, this.valueTemplate);

    this.bValue = updateSlider(this.id + ":b", this.bSlider, this.bValue, bColor, this.width, this.size, this.valueTemplate);

    pop();

  }

}

​

let rgb;

​

function setup() {

  createCanvas(400, 400);

  rgb = new RgbSliders("slider", 135, 50, 255, 20);

}

​

let bcolor = 220;

​

function draw() {

  background(bcolor);

​

  rgb.update();

  uiFill(rgb.getColor());

  rect(10, 10, 50, 50);

}