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?