JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<input type="text" id="inp1-min" class="temperature" value="22" data-thickness="0.4" />
<input data-angleoffset="-125" data-anglearc="250" value="22" data-max="30" data-linecap="round" class="temperature">
<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 =...

JavaScript

jQuery(document).ready(function ($) {
  $(".temperature").knob({
    'fgColorStart' : '#2488DC',
    'fgColorEnd' : '#FB1934',
    'format' : function (value) {
       return value + String.fromCharCode(8451);
    },
      'draw': function () {
          var v=parseInt($(this.i).val(),10);
          var cs=colorParse(this.o.fgColorStart); //Start color
          var ce=colorParse(this.o.fgColorEnd); //End color
          var ends = new Array(new Color(cs[0],cs[1],cs[2]),new Color(ce[0],ce[1],ce[2]));
          var steps = (this.o.max - this.o.min) / this.o.step;
          var step = new Array(3);
          var color = mixPalette();

          this.o.fgColor=color;
          this.$.css({'color':color});
          function Color(r,g,b) {
            this.r = r;
            this.g = g;
            this.b = b;
            this.coll = new Array(r,g,b);
            this.text = cText(this.coll);
          }

          function colorParse(c) {
            c = c.toUpperCase();
            col = c.replace(/[\#\(\)]*/i,'');
            var num = new Array(col.substr(0,2),col.substr(2,2),col.substr(4,2));
            var ret = new Array(parseInt(num[0],16),parseInt(num[1],16),parseInt(num[2],16));
            return(ret);
          }

          function stepCalc() {
            step[0] = (ends[1].r - ends[0].r) / steps;
            step[1] = (ends[1].g - ends[0].g) / steps;
            step[2] = (ends[1].b - ends[0].b) / steps;
          }

          function mixPalette() {
            stepCalc();
            var r = (ends[0].r + (step[0] * v));
            var g = (ends[0].g + (step[1] * v));
            var b = (ends[0].b + (step[2] * v));
            var color = new Color(r,g,b);
            return color.text;
            //console.log(palette[i]);
          }

          function cText(c) {
            var result = '';
            for (k = 0; k < 3; k++) {
              val = Math.round(c[k]/1);
              piece = val.toString(16);
              if (piece.length < 2)...