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 w

Answer 1

Demo seems to work for me.

Answer 2

I'd consider adding an additional input showing a text with suffix, while the spinner is containing only number. That is a convenient way to work with posted data.

$( ".spinner" ).spinner({ 
    min: 1,
    max: 999,
    spin: function() {
        $(this).siblings('.spinner-text').val($(this).val()+' items');
    },
    stop: function() {
        $(this).siblings('.spinner-text').val($(this).val()+' items');
    }
 }).parent().append('<input class="spinner-text">');

http://jsfiddle.net/6t9bS/3/

Answer 3

In my opinion the best solution is to use CSS:

.percentspinner .ui-spinner:before {
    content: "%";
    width: 40px;
    padding-top: 5px;
    position: absolute;
    top: 0;
    right: 0;
}

With following HTML:

<div class="percentspinner"><input id="spinner" type="text" value="10.02" /></div>

And JavaScript:

 $("#spinner").spinner({step: 0.01});

JSFiddle

This is the simplest implementation to explain the idea, I'd suggest to use text-align and padding-right achieve desired flexibility.

I tried/considered many approaches but after that I came with this idea. From my point of view it has the most important benefits like: character "%" doesn't influence submitted content, user still can edit value but he don't need to think "what if I delete the character?", easy implementation...

Answer 4

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.

Answer 5

It should be possible, since according to the docs on the page you linked to:

suffix (string)

Character suffix after the number. Commonly used for percentage signs. Defaults to ''.

If it did not work, what happened instead?