How format with commas in jQuery-UI slider?

Question

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]);
            }
});

Trying to find a duplicate for `.html(ui.values[0].toLocaleString())` — freedomn-m, Sep 18 '19 at 15:30
TBH your question is a bit confusing as you ask how to submit "3 digits" and in "MVC" - when you want to format a number with commas in jquery-ui. Nothing to do with submitting/MVC and "commas" are not "digits" (eg 1.000). Assumed it's a language barrier and tweaked the question/title — freedomn-m, Sep 18 '19 at 15:31
Possible Duplicate: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript And https://stackoverflow.com/questions/3753483/javascript-thousand-separator-string-format And https://stackoverflow.com/questions/5731193/how-do-i-format-numbers-using-javascript — Twisty, Sep 18 '19 at 16:23
I literally gave you the answer above: change `$("#minamount").html(ui.values[0]);` to `$("#minamount").html(ui.values[0].toLocaleString());` — freedomn-m, Sep 19 '19 at 12:54

haldo · Answer 1 · 2019-09-19T13:43:03.790

1

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());
}

edited Sep 19 '19 at 13:43

answered Sep 18 '19 at 15:35

haldo

14,512
5
46
52

@sepide725 please explain what you want then. how do you want it formatted? what's wrong with my answer? I can only help if you explain what the problem is. – haldo Sep 18 '19 at 17:41
I have a price range with jquery-ui.js from 3 to 5,000,000. – sepide725 Sep 18 '19 at 17:53
i want to separate numbers bigger than three digits with comma – sepide725 Sep 18 '19 at 17:54
but it writes 5000000 with no comma – sepide725 Sep 18 '19 at 17:56
i explain it for example – sepide725 Sep 18 '19 at 17:59

Vandesh · Accepted Answer · 2019-09-18T18:00:34.620

1

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

edited Sep 18 '19 at 18:00

answered Sep 18 '19 at 15:52

Vandesh

6,368
1
26
38

i have question that related to it,How can I read the selected numbers??to use in other function in script. – sepide725 Sep 18 '19 at 19:09
for example i use var maxamount = $("#maxamount").text(); to read max amount. – sepide725 Sep 18 '19 at 19:12
i mean is it true ?with no comma. var minamount = $("#slider-value").html(ui.values[0])} – sepide725 Sep 18 '19 at 19:16
If at that point, you have the slider already initialized, then `$(".slider").slider('values')` should give you the min and max values in an array. – Vandesh Sep 18 '19 at 20:19
you mean var minamount=$("#slider").slider('ui.values[0]'); retun me min amount in another script function,thank. – sepide725 Sep 19 '19 at 04:12
`minamount = $(".slider").slider('values')[0]` and `maxamount = $(".slider").slider('values')[1]` – Vandesh Sep 19 '19 at 09:27
how can i Read the most and the most? – sepide725 Nov 12 '19 at 13:29
i write it but it doesn't work true var minamount = $("#slider-value").html(values[0]); var maxamount = $("#slider-value").html(values[1]); – sepide725 Nov 12 '19 at 13:30
You should ask a new question for that with your complete setup. – Vandesh Nov 12 '19 at 14:52
i asked can help me?https://stackoverflow.com/questions/58819594/read-price-suffering-values – sepide725 Nov 12 '19 at 14:56

How format with commas in jQuery-UI slider?

2 Answers2