Add thousand separators to output from jQuery Slider plugin

Question

I'm using the jQuery Slider plugin (jqueryui.com/demos/slider/)

I'm calling the plugin with the following Javascript:

$(function(){
 $("#slider-price").slider({
 range: true,
 min: 0,
 max: 5000000,
 step: 100000,
 values: [0, 5000000],
 slide: function(event, ui) {       
 $("#amount").val('£' + ui.values[0] + ' - £' + ui.values[1]);
}
});
});

And printing onto the page with the mark-up:

<label for="amount">Price : </label>
<input class="bar-price" type="text" id="amount" />
<div id="slider-price"></div>

Of course the Javascript above will print something like "£0 - £5000000" into the "amount" input box.

I've been looking at a way to extend the Javascript so that it formats the numbers with thousand separators (i.e. "£0 - £5,000,000"). I have found several Javascript functions that will do this, but I can't seem to call them within the jQuery function block.

For example this function would be perfect http://www.mredkj.com/javascript/nfbasic.html but I cant seem to reference it before printing the numbers into the input box string.

I'm sure there must be a simple solution to this.

Answer 1

try this....

slide: function(event, ui) {       
 $("#amount").val('£' + addCommas(ui.values[0]) + ' - £' + addCommas(ui.values[1]));
}



//.....


function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Answer 2

function commafy(val) {
    return String(val).split("").reverse().join("")
                      .replace(/(.{3}\B)/g, "$1,")
                      .split("").reverse().join("");
}

From: http://twitter.com/ded/status/13621796430

Usage:

commafy(5000000); // => 5,000,000