NaN Jquery knob

Question

I am trying to remove the NaN showing on my jquery knob. I have tried a few thing such as setting a timeout and adjust the count down timer. How can I fix my knob so it no longer shows NaN when first called?

example http://codepen.io/missile20706/pen/jAaYjx

$.fn.timer = function( userdefinedoptions ){ 
    var $this = $(this), opt, count = 0; 


    opt = $.extend( { 
        // Config 
        'timer' : 30, // 300 second default
        'width' : 100 ,
        'height' : 100 ,
        'fgColor' : "blue" ,
        'bgColor' : "white" 
        }, userdefinedoptions 
    ); 


    $this.knob({ 
        'min':0, 
        'max': opt.timer, 
        'readOnly': true, 
        'width': opt.width, 
        'height': opt.height, 
        'fgColor': opt.fgColor, 
        'bgColor': opt.bgColor,                 
        'displayInput' : true, 
        'dynamicDraw': false, 
        'ticks': 0, 
        'thickness': 0.3 
    }); 


    setInterval(function(){ 
        newVal = ++count; 
        $this.val(newVal).trigger('change'); 
    }, 1000); 
};

$('.example').timer();

Answer 1

Just set the initial value of your input to "0"

<input class="example" value="0">