CODEWITHSUNDEEP
javascriptjquery-ui
sepide725
sepide725

Reputation: 13

How format with commas in jQuery-UI slider?

Here I've used jquery-ui.js so that it shows numbers from 0 to 2000000 and I'd like to show long number formatted like 2,000,000

<div class="slider>
<a id="minamount" style="">0</a>
<a id="maxamount" style="">2000000</a>
</div>

javascript:

$(".slider").slider({
            min: 0,
            max: 2000000,
            values: [0, 2000000],
            range: true,

            step: 10,

            slide: function (event, ui) {
               $("#minamount").html(ui.values[0]);
               $("#maxamount").html(ui.values[1]);
            }
});

Upvotes: 0

Views: 1532

Answers (2)

haldo
haldo

Reputation: 16711

To format a string using thousands separator (eg 12,345) you can use toLocaleString().

$("#minamount").html(ui.values[0].toLocaleString());

See snippet below.

for (var i = 1.234; i < 10000000; i *= 10)
{  
  console.log(i.toLocaleString());
}

Upvotes: 1

Vandesh
Vandesh

Reputation: 6894

You can use Intl.NumberFormat() for doing it like - 

const numberFormat = new Intl.NumberFormat();
$(".slider").slider({
            min: 0,
            max: 2000000,
            values: [0, 2000000],
            range: true,

            step: 10,

            slide: function (event, ui) {
               $("#minamount").html(numberFormat.format(ui.values[0]));
               $("#maxamount").html(numberFormat.format(ui.values[1]));
            }
});

You can pass a bunch of values for your locale according to the documentation if you want it formatted according to a specific locale.

Note: On the initial load, the slide function is not called, in which case, you could manually call the slider('values') function of the slider after initialization to manually set the HTML in the beginning.

EDIT:

Find a sample Fiddle to play around

Upvotes: 1

Related Questions