Is there a way to add thousands separators for HTML input range type?

Question

I would like to add thousand separators using English convention for the displayed ouput.

<input id="number692" oninput="outputnumber692.value=number692.value" type="range" lang="en-150" name="number-692" value="110" min="500" max="200000"><output name="number-692" id="outputnumber692" for="number692">110</output>

I have read about lang="en-150" attribute and it does not work. With JS I've only managed to change the value using onChange event, but it won't trigger dynamically.

JSFiddle link

Answer 1

You could apply the answer from this other question to your issue:
Add a thousands separator to a total with Javascript or jQuery?

// Using function from here: https://stackoverflow.com/questions/2646385/add-a-thousands-separator-to-a-total-with-javascript-or-jquery
function addCommas(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

<input id="number692" oninput="outputnumber692.value=addCommas(number692.value)" type="range" lang="en-150" name="number-692" value="110" min="500" max="200000">
<output name="number-692" id="outputnumber692" for="number692">110</output>

Or, as you were talking about en-150, you can also use .toLocaleString('en-150'):
(but that's not comas)

<input id="number692" oninput="outputnumber692.value=(+number692.value).toLocaleString('en-150')" type="range" lang="en-150" name="number-692" value="110" min="500" max="200000">
<output name="number-692" id="outputnumber692" for="number692">110</output>

Hope it helps.