I am using the range slider in my web app, but need the numbers displayed in currency formatting, i.e. $ 100,000.
The advanced formatting options as defined here does not seem to work.
Has anyone had a similar use case and were you successful in displaying the numbers as currency?
The advanced formatting I am using is this:
"{ format: { to: function (value) { // Create our number formatter. var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, // the default value for minimumFractionDigits depends on the currency // and is usually already 2 }); var newValue = formatter.format(value); //return newValue + ',-'; console.log(newValue); return newValue; }, from: function (value) { // Create our number formatter. var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, // the default value for minimumFractionDigits depends on the currency // and is usually already 2 }); var newValue = formatter.format(value); //return newValue.replace(',-', ''); console.log(newValue); return newValue; } } }"
In the console log, I do see the values formatted correctly. However, on the screen, I get NaN instead of the formatted text displayed.
I understand that this means the value the control is expecting to display should be an integer. How then do I get it to display a formatted value?
I am currently using it and had a similar question to you but instead I am trying to put text underneath I did manage to find some documentation for your issue if you are still having it (I know it's been a while since you posted haha)
https://refreshless.com/nouislider/number-formatting/
Hi Hanno,
Recently I tried the same, for formatting the range slider values as currency. In the Advanced Format got to apply this code and it worked.
"{pips: {format: wNumb( {decimals: 0, prefix: '$', thousand: ','}) }}"
For More Info refer this URL : https://refreshless.com/wnumb/
You can use this simple CSS to add content before the RangeSlider values. Add this CSS in your screen where you are using the Range Slider.
.range-slider-input1:before { content:'$'} .range-slider-input2:before { content:'$'}