Adding Percentages to jquery knob input value [duplicate]

Question

I'm using jQuery plugin called Jquery Knob http://anthonyterrien.com/knob/

To create circular progress bar ,

So here's my code

<input type="text" value="90" class="dial" data-width="80" data-height="90" data-readOnly=true data-fgColor="#2ecc71">

JS Knob Execute

$(".dial").knob();

Tried to append ( % ) to value attribute but it's not rendered

$('.dial').each(function() {

  $(this).attr("value", $(this).attr("value") + "%");

});

Any Suggestions ? Thanks !

Billen

it looks like using a percentage in the value will break the whole plugin. You can probably set displayInput to false, then add an element to the page to show your own number with a percentage, that you can update using the plugins change event. If you post a fiddle, I can probably help you out if your having trouble. – Dwight

What if you used the ASCII equivalent? .... % – Bride

@Dwight Yep , This value attribute must by a nubmer for the plugin to work , i'll try your suggestion and i'll update the question with a fiddle – Billen

@Bride as i said for Rooster , value attribute must be a number to the plugin to work – Billen

@Dwight Thanks ! created a span inside my progress div , hided knob value and styled it and it's working perfectly now ! – Billen

can you post your solution ? – Monogyny

Answer 1

As of version 1.2.7 of this plugin there is a format hook that you can use to change the way that the number is displayed.

For example you can specify:

$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});

Humanitarian

Should be marked as answer – Anabas

Answer 2

Use below code it will work

$(".dial").knob({
 'change': function (v) { console.log(v); },
  draw: function () {
  $(this.i).val(this.cv + '%');
  }
 });

Jiujitsu