Format Beschriftungstext, der den Wert von Slider bekommt - JS

Question

Ich habe einen Bereichsschieberegler und Label, die den Wert von 18,86

das Skript funktioniert ganz gut, aber ich muss wissen, wie zu formatieren das Label unterteilt Schieberegler wird um das Ergebnis möglichst in einem Währungsformat darzustellen.

<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

Verwenden Sie ein Format Funktion:

(.. Diese Funktion von mir geschrieben ist, nicht von jedem beliebigen Ort kopieren funktioniert es mit und ohne Dezimalpunkt es frei verwenden)

2017/6/5 bearbeitet: Code-Snippet modifiziert, um IE zu unterstützen. Für die IE-Kompatibilität sind zwei Dinge zu beachten:

1. IE < = 11 unterstützt Number.isFinite nicht.
2. IE < = 11, input type=range löst onchange nicht oninput (für Chrome, Firefox, Rand)

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>