javascript - 设置从 slider 获取值的标签文本格式 - JS

Question

我有一个范围 slider 和标签，它可以将 slider 的值除以 18.86

脚本工作得很好，但如果可能的话，我需要知道如何格式化标签以以货币格式呈现结果。

<input id="fundvalueslider" max="1000000" min="0" step="1000" type="range" value="0" />
<br/>
<br/>
<label id="lumpsumamount">0</label>
<p>I want it to show $1,000,000.00</p>
<script>
fundvalueslider.oninput = function()
{lumpsumamount.innerText = fundvalueslider.value /18.86;}
</script>

Answer 1

使用格式化函数:

(这个函数是我写的，不是从任何地方复制的。它可以带小数点，也可以不带小数点。随意使用)

2017年6月5日编辑:修改代码片段以支持 IE。对于IE兼容性，有两点需要注意:

1. IE <= 11 不支持 Number.isFinite。
2. IE <= 11，input type=range 触发 onchange 而不是 oninput(适用于 Chrome、Firefox、Edge)

function formatNumber(value, precision) {
    var regex = /(\d)(?=(\d{3})+(?:(\.)\d+)?$)/g;
    return (+value).toFixed(precision || 0).replace(regex, function(a, b, c, d) {
            return d ? b+',' : b;
    });
}

fundvalueslider.onchange = 
fundvalueslider.oninput = 
function() {
   lumpsumamount.innerText = '$'+formatNumber(fundvalueslider.value /18.86, 2);
}

<input id="fundvalueslider" max="50000000" min="0" step="1000" type="range" value="0" />
<br/>
<br/>
<label id="lumpsumamount">0</label>
<p>I want it to show $1,000,000.00</p>