Knob - Color Chanegs with Value

by bizamajig

HTML

<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<input type="text" id="inp1-min" class="knob1" value="0" data-width="120" data-thickness="0.4" />

CSS

#inp1-min {
    -webkit-animation: myfirst 5s;
    /* Chrome, Safari, Opera */
    animation: myfirst 1s;
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes anim-to-red {
    from {
        color: #87CEEB;
    }
    to {
        color: red;
    }
}
#box {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}
/* Standard syntax */
 @keyframes anim-to-red {
    from {
        color: #87CEEB;
    }
    to {
        color: red;
    }
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes anim-to-blue {
    from {
        color: red;
    }
    to {
        color: #87CEEB;
    }
}
/* Standard syntax */
 @keyframes anim-to-blue {
    from {
        color: red;
    }
    to {
        color: #87CEEB;
    }
}

JavaScript

jQuery(document).ready(function ($) {
      // linear interpolation between two values a and b
      // u controls amount of a/b and is in range [0.0,1.0]
      lerp = function (a, b, u) {
          return (1 - u) * a + u * b;
      };

      fade = function (element, property, start, end, duration, fn) {
          var interval = 20;
          var steps = duration / interval;
          var step_u = 1.0 / steps;
          var u = 0.0;
          var theInterval = setInterval(function () {
              if (u >= 1.0) {
                  clearInterval(theInterval);
              }
              var r = parseInt(lerp(start.r, end.r, u), 10);
              var g = parseInt(lerp(start.g, end.g, u), 10);
              var b = parseInt(lerp(start.b, end.b, u), 10);
              var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
              fn(property, colorname);
              //el.style.setProperty(property, colorname);
              u += step_u;
          }, interval);
      };

      //var current_color = 0; //0 for base,1 for upper
      var min_std = 25;
      var std_max = 75;
      var effect_duration = 300;
      var color_blue = {
          r: 135,
          g: 206,
          b: 235
      };
      var color_green = {
          r: 0,
          g: 128,
          b: 0
      };
      var color_red = {
          r: 178,
          g: 34,
          b: 34
      };



      //initialize all
      $('.knob1').knob({
          'min': 0,
              'max': 100,
              'step': 1,
              'readOnly': false,
              'linecap': 'round',
              'displayInput': true,
              'displayPrevious': false,
              'angleOffset': -125,
              'angleArc': 250
      });

      function change_color(v, element) {
          var v1 = v;
          var last_val = $(element).data('last_val');
          var current_color = $(element).data('current_color');
          //console.log('last: ' + last_val + ' v: ' + v1);
          if (last_val !=...