KNOB - Hi Med Low Settings

by bizamajig

HTML

<input type="text" id="inp1-min" class="knob1" value="0" data-width="120" data-thickness="0.4" />
<script>
  /*!jQuery Knob*/
/**
 * Downward compatible, touchable dial
 *
 * Version: 1.2.12
 * Requires: jQuery v1.7+
 *
 * Copyright (c) 2012 Anthony Terrien
 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
 *
 * Thanks to vor, eskimoblood, spiffistan, FabrizioC
 */
(function (factory) {
    if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

    /**
     * Kontrol library
     */
    "use strict";

    /**
     * Definition of globals and core
     */
    var k = {}, // kontrol
        max = Math.max,
        min = Math.min;

    k.c = {};
    k.c.d = $(document);
    k.c.t = function (e) {
        return e.originalEvent.touches.length - 1;
    };

    /**
     * Kontrol Object
     *
     * Definition of an abstract UI control
     *
     * Each concrete component must call this one.
     * <code>
     * k.o.call(this);
     * </code>
     */
    k.o = function () {
        var s = this;

        this.o = null; // array of options
        this.$ = null; // jQuery wrapped element
        this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
        this.g = null; // deprecated 2D graphics context for 'pre-rendering'
        this.v = null; // value ; mixed array or integer
        this.cv = null; // change value ; not commited value
        this.x = 0; // canvas x position
        this.y = 0; // canvas y position
        this.w = 0; // canvas width
        this.h = 0; // canvas height
        this.$c = null; // jQuery canvas element
        this.c = null; // rendered canvas context
        this.t = 0; // touches index
        this.isInit...

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 ($) {
      //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
      };

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

      var 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);
      };

      function change_color(v, element) {
				// STUBBED, BUT WORKS
					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 != v1) {
              //console.log(v);
              if (v1 > std_max && current_color !== 2) { //go red
                  console.log('calling fade to red');
                  if (current_color === 1) {
                      startColor = color_green;
                  } else {
                      startColor =...