How to add a value suffix in jQuery.knob

Question

I have problem with jQuery.knob I need to add a Sufixx to the value in the knob.

For Example: i need a Sufix $ after the value, i just

Answer 1

Your code actually not work because 51$ is not a valid int number, so it display 0.

Since that the plugin actually not implement any prefix/suffix feature, I built a little hack so in the draw callback it:

• get the position of the input element on which knob is applied
• build a span and append it after the input, and copied the same styles of the input
• move the position of the new element to let it appear as a suffix

Request: https://github.com/aterrien/jQuery-Knob/issues/65

Code:

    'draw': function () {
        if ($(this.i).siblings(".kb-suffix").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>$</span>").attr("style", $(this.i).attr("style")).addClass("kb-suffix");
        $elem.insertAfter(this.i).css({
            marginLeft: (pos1 + 20) + "px",
            marginTop: (pos2 + 3) + "px",
            zIndex: -10
    });

Demo: http://jsfiddle.net/IrvinDominin/ngX5p/

Answer 2

As for version 1.2.8 of knob(current of writing), simply use format function

jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round',
                'format': function(v){ return v + ' $';}
            });
        });

Answer 3

Try this in a simple way,

jQuery(document).ready(function($){
        $('.ksta').knob({
            'min':0,
            'max':100,
            'step': 1,
            'displayPrevious': true,
            'readOnly': true,
            'draw' : function () { $(this.i).val(this.cv + '%'); }
        });
    });

There is no need to change the styles and other details.....

Demo: http://jsfiddle.net/renishar/DWvsh/20/

Answer 4

    <input type="text" class="ksta" value="51" data-width="80" data-thickness="0.2"/>


      jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round'
            });
            $('.ksta').each(function(e){
               $(this).val($(this).val()+'$'); 
            });     
        });

http://jsfiddle.net/DWvsh/6/