Change color of a knob using query-knob

Question

i'm using knob jQuery to create an interactive knob, that, allowing sunstantial to see how much energy is consuming its power grid

this is the code that generate the knob

$(function(){

      $(".dial").knob({
            'min':0,
            'max':5000,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'float' : 'left',
            'fgColor': '#b9e672',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true,
            'skin':'tron'
        }) 

      // body...
    });

and this is the input:

<input id='knobinput' type='text' value='75' class='dial'>

I would like to make sure that if the knob is less than 1500 is green, if between 1500 and 3000 yellow and red if above 3000.

how can I do this?

thanks

score 4 · Accepted Answer · answered Oct 11 '13 at 09:47

Try this:

var $dial = $('.dial');
var dialColour = '#C00';
if ($dial.val() < 3000) {
    dialColour = '#CC0';
}
else if ($dial.val() < 1500) {
    dialColour = '#0C0';
}

$dial.knob({
    'min':0,
    'max':5000,
    'readOnly': true,
    'width': 120,
    'height': 120,
    'float' : 'left',
    'fgColor': dialColour,
    'dynamicDraw': true,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'skin':'tron'
})

Change color of a knob using query-knob

1 Answers1