jQuery Knob Test

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.rawgit.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js"></script>
<div style="height:250px;width:100%">
    <div style="position:relative;width:250px;margin:auto">
        <div style="position:absolute;left:60px;top:60px;">
            <input class="knob setTemp" id='setTemp' />
        </div>
        <div style="position:absolute;left:85px;top:85px">
            <input class="knob temp" id='temp' />
        </div>
    </div>
</div>

JavaScript

var changeFlag = true;

$(".temp").knob({
    'min': 0,
        'max': 500,
        'width': 150,
        'height': 150,
        'thickness': .4,
        'angleArc': 270,
        'angleOffset': -135,
        'displayInput': true,
        'readOnly': true,
        'fgColor': 'rgb(255, 0, 0)',
        'format': function (v) {
        return v + 'ºF';
    },
});

$(".setTemp").knob({
    'min': 0,
        'max': 500,
        'width': 200,
        'height': 200,
        'thickness': .25,
        'angleArc': 270,
        'angleOffset': -135,
        'fgColor': 'rgb(0, 0, 0)',
        'displayInput': false,
        'format': function (v) {
        return v + 'ºF';
    },
        'change': function () {
        if (changeFlag) {
            console.log("change");
            $("#setTemp").trigger('configure',{'displayInput': true});            
            $("#temp").trigger('configure',{'displayInput': false});                     
            changeFlag = false;
        }
    },
        'release': function () {
        console.log("release");
        $("#setTemp").trigger('configure',{'displayInput': false});            
        $("#temp").trigger('configure',{'displayInput': true});            
        changeFlag = true;
    }
});

$(".setTemp").val(400).trigger('change');
$(".temp").val(666).trigger('change');