function colorBarValueChanged (ui, context) {
    const { active } = color
    if (context !== colorBar && isNullish(active.val())) return
    switch (settings.color.mode) {
      case 'h':
        active.val('h', { h: 360 - ui.val('y') }, context)
        break
      case 's':
        active.val('s', { s: 100 - ui.val('y') }, context)
        break
      case 'v':
        active.val('v', { v: 100 - ui.val('y') }, context)
        break
      case 'r':
        active.val('r', { r: 255 - ui.val('y') }, context)
        break
      case 'g':
        active.val('g', { g: 255 - ui.val('y') }, context)
        break
      case 'b':
        active.val('b', { b: 255 - ui.val('y') }, context)
        break
      case 'a':
        active.val('a', 255 - ui.val('y'), context)
        break
    }
  }
User has dragged the ColorBar slider.
@param {external:jQuery} ui
@param {?module:jPicker.Slider} context
@returns {void}