Jquery range slider Add commas to integer

[hobier]

hi im using this code for my project

http://www.jqueryui.com/demos/slider/range.html

As im sliding the range buttons i want the integer to be shown with commas for example 1,000 or 10,000 and so on.

can anybody help me out

[HistoricalNeowin]

http://lmgtfy.com/?q=javascript+number+format

[hobier]

im a NOOB (thx to njlouch for a such bright tip) when it comes to scripting... jquery is updating the input field with integers now i dunno how to display them with comma seperate integers..

help with a code plz

Edited February 25, 2009 by hobier

[+Nik Louch Subscriber²]

A "nood"? You not even worked out that backwards "d" (here's a tip, it's on the bottom row!)

[HistoricalNeowin]

Did you look on google? Theres a website there with code that you can just copy and paste if thats your style.

[hobier]

yeah i check them out found sample code too....but how to implement it so that the slider updates the integers on the fly...currently the js sample code which i found...i've to press submit button..

i've seperated the range slider value into two input field...amountmin and amountmax.....where should i add the script to convert the integers with commas ?

[Antaris Veteran]

I've adapted this Javascript code from a site I found with Google (http://www.mredkj.com/javascript/numberFormat.html#addcommas):

var formatNumber = function(number)
{
	number += "";
	var parts = number.split('.');
	var integer = parts[0];
	var decimal = parts.length > 1 ? '.' + parts[1] : '';
	var regex = /(\d+)(\d{3})/;
	while (regex.test(decimal))
	{
		integer = integer.replace(regex, '$1' + ',' + '$2');
	}
	return integer + decimal;
};

You can then modify the slider code:

$("#slider-range").slider({
	range: true,
	min: 0,
	max: 500,
	values: [75, 300],
	slide: function(event, ui) {
		$("#amount").val('$' + formatNumber(ui.values[0]) + ' - $' + formatNumber(ui.values[1]));
	}
});

[hobier]

IT WORKS!!!

thankyou just need to edit slightly

CHANGE THIS:
while (regex.test(decimal))

TO:
while (regex.test(integer))

var formatNumber = function(number)
{
	number += "";
	var parts = number.split('.');
	var integer = parts[0];
	var decimal = parts.length > 1 ? '.' + parts[1] : '';
	var regex = /(\d+)(\d{3})/;
	while (regex.test(integer))
	{
		integer = integer.replace(regex, '$1' + ',' + '$2');
	}
	return integer + decimal;
};


$(function() {

$("#slider-range").slider({
	range: true,
	min: 0,
	max: 10000,
	values: [75, 300],
	slide: function(event, ui) {
		$("#amount").val('$' + formatNumber(ui.values[0]) + ' - $' + formatNumber(ui.values[1]));
	}
});
$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
	});

thanky you

Edited February 25, 2009 by hobier

[hobier]

Since the range would be from 1,000 - 1000,000 Is it possible to have the initial values 5,000 - 10,000 with commas too

i dunno how to implement formatNumber here:

$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));

[Antaris Veteran]

Ah, lol, good catch.

You'd probably want to do it:

$("#amount").val('$' + formatNumber($("#slider-range").slider("values", 0)) + ' - $' + formatNumber($("#slider-range").slider("values", 1)));

[hobier]

you are a scripting Guru....thank you sooooo much