plugins - How to add Suffix text in JQuery Spinner

Question

Is it possible to add suffix into jQuery spinner (jquery.ui.spinner). e.g: 10.02%.

I tried following, from jquery.ui.spinner [under Option section], but it did not work for me.

$("#spinner").spinner({
    step: 0.01,
    numberformat: "n",
    suffix: "%",
}); 

Appreciate the help in advance.

Thanks.

Answer 1

Have had the same problem.

With jQuery UI's widget factory it is quite easy:

$.widget( "ui.pcntspinner", $.ui.spinner, {
    _format: function(value) { return value + '%'; },

    _parse: function(value) { return parseFloat(value); }
});

$("#spinner").pcntspinner({ 
    min: 0,
    max: 100,
    step: .01 });

Demo: http://jsfiddle.net/aAHuT/

If integers are to be used '_parse' has to be adapted to use parseInt():

_parse: function(value) { return parseInt(value); }

The jQuery UI example for the Time Spinner has been very helpful for coming up with this solution.